javascript jquery radio button click

I have 2 radio buttons and jquery running.

<input type="radio" name="lom" value="1" checked> first <input type="radio" name="lom" value="2"> second

Now, with a button I can set onClick to run a function. What is the way to make radio buttons run a function when I click on one of them?


You can use .change for what you want

// Do something interesting here

as of jQuery 1.3

you no longer need the '@'. Correct way to select is:


If you have your radios in a container with id = radioButtonContainerId you can still use onClick and then check which one is selected and accordingly run some functions:

$('#radioButtonContainerId input:radio').click(function() {
if ($(this).val() === '1') {
} else if ($(this).val() === '2') {

<input type="radio" name="radio" value="creditcard" />
<input type="radio" name="radio" value="cash"/>
<input type="radio" name="radio" value="cheque"/>
<input type="radio" name="radio" value="instore"/>


this should be good

$(document).ready(function() {
$('input:radio').change(function() {

There are several ways to do this. Having a container around the radio buttons is highly recommended regardless, but you can also put a class directly on the buttons. With this HTML:

<ul id="shapeList" class="radioList">
<li><input id="shapeList_0" class="shapeButton" type="radio" value="Circular" name="shapeList" /><label for="shapeList_0">Circular</label></li>
<li><input id="shapeList_1" class="shapeButton" type="radio" value="Rectangular" name="shapeList" /><label for="shapeList_1">Rectangular</label></li>

you can select by class:


or select by container ID:


In either case, the event will trigger on clicking either the radio button or the label for it, though oddly in the latter case (Selecting by "#shapeList"), clicking on the label will trigger the click function twice for some reason, at least in FireFox; selecting by class won't do that.

SetShape is a function, and looks like this:

function SetShape() {
var Shape = $('.shapeButton:checked').val();

This way, you can have labels on your buttons, and can have multiple radio button lists on the same page that do different things. You can even have each individual button in the same list do different things by setting up different behavior in SetShape() based on the button's value.

it is always good to restrict the DOM search. so better to use a parent also, so that the entire DOM won't be traversed.


<div id="radioBtnDiv">
<input name="myButton" type="radio" class="radioClass" value="manual" checked="checked"/>
<input name="myButton" type="radio" class="radioClass" value="auto" checked="checked"/>

// your stuffs go here

Category:javascript Time:2011-02-28 Views:1

Related post

  • Registering jquery radio button click event doesn't work 2011-02-17

    I am trying to set a hidden form field with the value of a selected radio button. I have the following code: $(function () { // set hidden form field with selected timeslot $('input[name=["timeslot"]').live("click", (function () { var valu = $(this).

  • jquery radio button click event problem 2010-05-12

    I have the following code in jQuery for a set of radio buttons which all have the same behaviour on click (they show some hidden fields). I was previously duplicating the same code for each individual selector, so i just used multiple selectors as in

  • Call a javascript function on button click in jquery mobile application 2010-11-10

    can anyone tell me how to call a javascript function on button click in jquery mobile application . I am using jquery mobile in my mvc application. I want to call a jquery function on focus of a textbox. I can not make the call in the traditional way

  • jQuery Autocalculate based on Radio Button Click 2011-04-12

    I am stuck on the last part of this jQuery auto-calculation script that I am working on. I want to automatically re-calculate the subtotal values based on a "radio button click". The calculation will automatically add a 10% discount when the radio bu

  • How to show javascript alertbox on button click event in webpage if textbox1.text=""? 2010-12-20

    How to show javascript alertbox on button click event in webpage if textbox1.text="" ? --------------Solutions------------- What you must do is attach a script to the button's client click event. In that script, check the value of textbox1. I

  • Retrieve mySQL Data On Radio Button Click 2012-02-29

    Through some very much appreciated help from users of this site I've been able to put together a script that upon a radio button click will populate a table with user details. I thought that I'd be able to adapt it even further, but, quite possibly b

  • Expander on Radio Button Click 2011-11-21

    Following is my xaml code . I have two expanders with two buttons All I want is the the expander open on radio button click Say radio Button1 will open Symbol and radioButton 2 will open Picture <Expander Header="Symbol" > <Grid> <Labe

  • Get the primarykey on radio button click 2012-03-23

    I have several radio buttons that are dynamically populated on a form and I have set a click event on the dynamically created radio buttons. On click i get a returned value as follows through debugging (eg) "sender { Text = "this is answer one" + Che

  • MS Word - radio button - click and unclick the same button - how can I do it ? 2013-04-14

    Hi, I have created a document and add radio button for each participants. I want to use this button to identify who are present and who are not (radio button clicked=present; unclicked=absent). Each participants were added to my list but now that I c

  • jQuery , show and hide divs based on radio button click 2011-05-09

    This question already has an answer here: How to use jQuery to show/hide divs based on radio button selection? 6 answers So I want to be able to dynamically change what divs are show using radio button and jQuery - HTML: <div id="myRadioGroup">

  • Strongly-typed partial view is not loading from jQuery function on radio button click 2010-01-15

    I have two strongly-typed partial views (Developers list and Testers list) and the respective views are Developers.ascx and Testers.ascx Now I want to load one partial view based on the radio button selected. The below code is not loading the URL tha

  • stuck with jquery radio button checked / click 2011-11-16

    first timer here especially to jquery, I've got a review form written in php with mysql. Part of the form allows the user to re-edit the details if they press the preview button. The below is what is in use to show / hide a few of the fields dependin

  • jQuery - replace standard radio button click() action 2012-02-07

    I'm using radio buttons with some Ajax loaded content. Basicly due to other functionality of web, radio buttons are completly jQuery based. So whenever i click them certain action is called. Anyway - I can't come up to solution with 1 problem. I want

  • Radio button click in JQuery 2014-02-20

    I have radio button control in my application, I want to apply jquery click event on this control with class name. I have set CssClass property and made script with the class name,but its not working.When I inspect the HTML in firebug,its mak

  • How to fill Jquery UI Progress bar with radio button clicks 2011-02-23

    I would like to have a Jquery UI Progress bar fill up according to how many questions have been answered in a form. I have roughly 46 questions with radio buttons acting as 3 options to choose from per question. I want the progress bar to be full whe

  • jQuery selecting div to change background on radio button click 2011-08-04

    I have a set of dynamic radio buttons that all show/hide certain fields when selected, and I'm trying to have the same jQuery block that shows and hide fields also show the correct preview image. It's for a wordpress theme. The container (tested with

  • javascript for radio button list 2009-12-01

    i have an Radiobutton with (6 items under it). and i have an search button. if user clicks Search button it gets all the result. i am binding the items for Radiobuttonlist using database in .cs file condition 1: now if user as selected Radiobutton1 [

  • Un-Change color of table cell after radio button click 2011-03-09

    I have a table with a radio button in the very first cell of each row. Everytime I click on the button the color of the row should change - which it does. But what I want to achieve is that every time I click another radio button, the color of the ta

  • jquery, radio buttons, validation, and indexes problem 2011-04-18

    I have a set of radio buttons with the name="rb_Select". I added a simple radio button validation to make sure that at lease 1 radio button was selected, but i see now that i have my syntax is my javascript function written incorrectly. Basically, wh

Copyright (C), All Rights Reserved.

processed in 0.811 (s). 13 q(s)