I am trying to get the index of the selected input radio when click a button. so, I use click function.

$('id').click(function(){
    $('input[name="name"]').each(function(){
        if($(this).prop('checked') === 'checked'){
            ...
        }
    })
})

But I found that the checked property of the input radio does not change, actually there is no 'checked' attr at all on the dom node.

So, do I have to set the 'checked' prop on the input radio before read it via $.change() method? if not, then, how to get the index of the input radio that has been selected.

Thanks.

I am trying to get the index of the selected input radio when click a button. so, I use click function.

$('id').click(function(){
    $('input[name="name"]').each(function(){
        if($(this).prop('checked') === 'checked'){
            ...
        }
    })
})

But I found that the checked property of the input radio does not change, actually there is no 'checked' attr at all on the dom node.

So, do I have to set the 'checked' prop on the input radio before read it via $.change() method? if not, then, how to get the index of the input radio that has been selected.

Thanks.

• javascript
• jquery
• html
• dom

Share Improve this question Follow edited Nov 21, 2015 at 2:58 GLPease asked Nov 21, 2015 at 2:52 GLPeaseGLPease 60111 gold badge99 silver badges2020 bronze badges 3

• I am not asking the code to replace the ... part, I am saying that the if condition wont work as there is no prop [checked] at all on the input node after selected. – GLPease Commented Nov 21, 2015 at 2:57
• 1 As an aside $(this).prop('checked') is a boolean, so you shouldn't need the === 'checked' if you were to use a conditional. – Donnie D'Amato Commented Nov 21, 2015 at 2:59
• Thanks, now I know why. – GLPease Commented Nov 21, 2015 at 3:06

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

$('#btn').click(function(){
var index = $("input[name=radio]:checked").index();
$('#span').html(index)
})

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='radio' name='radio'>
<input type='radio' name='radio'>
<input type='radio' name='radio'>
<input type='radio' name='radio'>
<input type='radio' name='radio'>
<input type='button' value='click' id='btn'>
<span id='span'></span>

Try like this

Here is a javascript version using findIndex:

btn.onclick = e => {
   var index = [... document.querySelectorAll("input[name=radio]")].findIndex(e=>e.checked)
   span.innerHTML = index;
}

<input type='radio' name='radio'>
<input type='radio' name='radio'>
<input type='radio' name='radio'>
<input type='radio' name='radio'>
<input type='radio' name='radio'>
<input type='button' value='get index' id='btn'>
<span id='span'></span>

Using the .each() function you can grab the index of each element.

Using the .is(':checked') function you can check if something is checked.

Mix these together and you can try something like this:

$("input[type=checkbox]").each(function(i,o){
    if($(this).is(":checked"))
        alert(i);
});

CHECK OUT THIS DEMO

This should be all you need.

var index = $('input[name="name"]:checked').index();