javascript jquery radio button click - Stack Overflow

admin管理员组

文章数量:1134247

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?

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?

• javascript
• jquery

Share Improve this question Follow edited Feb 28, 2011 at 13:04 David19801 asked Feb 28, 2011 at 12:58 David19801David19801 11.4k2626 gold badges8686 silver badges127127 bronze badges 1

• 4 Note. It's best not to have form elements respond to click, as many people navigate forms using the keyboard. – superluminary Commented Mar 17, 2014 at 16:37

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 191

You can use .change for what you want

$("input[@name='lom']").change(function(){
    // Do something interesting here
});

as of jQuery 1.3

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

$("input[name='lom']")

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') {
      myFunction();
    } else if ($(this).val() === '2') {
      myOtherFunction();
    } 
  });

<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"/>

$("input[name='radio']:checked").val()

this should be good

$(document).ready(function() {
    $('input:radio').change(function() {
       alert('ole');
    });
});

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><label>Shape:</label></li>
<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>
</ul>

you can select by class:

$(".shapeButton").click(SetShape);

or select by container ID:

$("#shapeList").click(SetShape);

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();
//dostuff
}

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.

IT IS VERY FAST

<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"/>
</div>



 $("input[name='myButton']",$('#radioBtnDiv')).change(
    function(e)
    {
        // your stuffs go here
    });

本文标签： javascript jquery radio button clickStack Overflow