I have a set of radio buttons which I'd like to find the selected radio buttons ID using jQuery.

That is my set of Radio Buttons, With the following jQueryCode - I'm receiving an 'Undefined' alert whenever I change radio buttons.

$("#radios").on("change", function() {
    myID = $("#radios").nextAll(":radio:checked").first().attr('id');
    alert(myID);
});

<script src=".11.1/jquery.min.js"></script>
<div id="radios">
   <input id="option1" name="options" type="radio" checked>
   <label value="test" for="option1">X-01</label>
   <input id="option2" name="options" type="radio">
   <label for="option2">X-02</label>
   <input id="option3" name="options" type="radio">
   <label for="option3">X-03</label>
   <input id="option4" name="options" type="radio">
   <label for="option4">M-01</label>
   <input id="option5" name="options" type="radio">
   <label for="option5">M-02</label>
   <input id="option6" name="options" type="radio">
   <label for="option6">M-04</label>
   <input id="option7" name="options" type="radio">
   <label for="option7">L-01</label>
   <input id="option8" name="options" type="radio">
   <label for="option8">L-02</label>
</div>

I have a set of radio buttons which I'd like to find the selected radio buttons ID using jQuery.

That is my set of Radio Buttons, With the following jQueryCode - I'm receiving an 'Undefined' alert whenever I change radio buttons.

$("#radios").on("change", function() {
    myID = $("#radios").nextAll(":radio:checked").first().attr('id');
    alert(myID);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="radios">
   <input id="option1" name="options" type="radio" checked>
   <label value="test" for="option1">X-01</label>
   <input id="option2" name="options" type="radio">
   <label for="option2">X-02</label>
   <input id="option3" name="options" type="radio">
   <label for="option3">X-03</label>
   <input id="option4" name="options" type="radio">
   <label for="option4">M-01</label>
   <input id="option5" name="options" type="radio">
   <label for="option5">M-02</label>
   <input id="option6" name="options" type="radio">
   <label for="option6">M-04</label>
   <input id="option7" name="options" type="radio">
   <label for="option7">L-01</label>
   <input id="option8" name="options" type="radio">
   <label for="option8">L-02</label>
</div>

What am I doing wrong?

• javascript
• jquery
• html
• dom

6 Answers 6

As radio buttons are children of #radios div, You need to use $.fn.find()

Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

Code, Also bind change event with radio buttons

$( "#radios input:radio" ).on( "change", function() {
   myID = $("#radios").find(":radio:checked").first().attr('id');
   alert(myID);
});

Note: You can also use $.fn.children(), However The .children() method differs from .find().

You need to use find method to get the radio.

$("#radios").on("change", function () {
    myID = $("#radios").find(":radio:checked").first().attr('id');
    //                  ^^^^
    alert(myID);
});

Demo: http://fiddle.jshell/575Lycoj/

You need to

1) Attach the change event to input element rather than attaching to div with id #radios

2) and then find checked element in it. :

$( "#radios input" ).on( "change", function() {
   myID = $("#radios :radio:checked").first().attr('id');
   alert(myID);
});

Check the event on the inputs and get the id of the checked radio. Try with -

$( "#radios input" ).on( "change", function() {
myID = $("#radios input:radio:checked").attr('id');
  alert(myID);
});

DEMO

While the change event works due to bubbling, it would be nicer to bind the event to elements which actually fire the change event:

$("#radios").on("change", 'input', function() {
  var myID = $("#radios input").filter(":radio:checked").first().attr('id');
  alert(myID);
});

$( "#radios" ).on( "change", function() {
myID = $(this).find(":radio:checked").first().attr('id');
  alert(myID);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="radios">
    				<input id="option1" name="options" type="radio" checked>
    				<label value="test" for="option1">X-01</label>

    				<input id="option2" name="options" type="radio">
    				<label for="option2">X-02</label>

    				<input id="option3" name="options" type="radio">
    				<label for="option3">X-03</label>

    				<input id="option4" name="options" type="radio">
    				<label for="option4">M-01</label>

    				<input id="option5" name="options" type="radio">
    				<label for="option5">M-02</label>

    				<input id="option6" name="options" type="radio">
    				<label for="option6">M-04</label>
    				
    				<input id="option7" name="options" type="radio">
    				<label for="option7">L-01</label>
    				
    				<input id="option8" name="options" type="radio">
    				<label for="option8">L-02</label>
    			</div>