jQuery: how to get the index of a checked radio button

Question

I recently came across a StackOverflow answer that gave excellent instructions on how to get the value of a checked radio button using jQuery:

var radioVal = $(\         


        

Answer 1

it return -1 because you get the value before any radiobutton was checked. i think you miss placed your listener and index checked. I just got the same error, but finally found the answer, i get the index before anything was checked, please check your code arrangement, the code stated above is right.

Answer 2

This should work. You could do it all in one line but I broke it up to make it easier to read:

var radioButtons = $("#myFormID input:radio[name='radioFieldName']");
var selectedIndex = radioButtons.index(radioButtons.find(':checked'));

EDIT: Verify that your selector is correct. Break it down step by step:

var radioButtons = $("#myFormID input:radio[name='radioFieldName']");

// this should contain the count of all your radio buttons
var totalFound = radioButtons.length;

// this should contain the checked one
var checkedRadioButton = radioButtons.find(':checked');

// this should get the index of the found radio button based on the list of all
var selectedIndex = radioButtons.index(checkedRadioButton);

Which step is not producing the expected value in these?

EDIT: To show final solution

var radioButtons = $("#myFormID input:radio[name='radioFieldName']");
var selectedIndex = radioButtons.index(radioButtons.filter(':checked'));

Answer 3

Though this is old, but try this (assuming you're within the click function of the radio buttons)

$('#myFormID input:radio[name=radioFieldName]').click(function(){
  var index = $('#myFormID input:radio[name=radioFieldName]').index(this);
  alert(index);
});

Answer 4

Try using the form of index that allows you to specify an element in a collection and returns it's relative position in the collection:

var radioIdx = $(":radio[name='radioFieldName']")
                    .index($(":radio[name='radioFieldName']:checked")); 

or the version that finds the first item matching a selector that is in another collection and reports it's position in the second collection.

var radioIdx = $(":radio[name='radioFieldName']:checked")
                   .index(":radio[name='radioFieldName']");

Answer 5

use this

    alert($("input[name=checkname]:checked").map(function () {return this.value;}).get().join(","));

Answer 6

There are a couple of options:

1) Enumerate through the radio button list (aka without the :checked modifier) and test to see if it is checked; if so, you have the id of the element in the group.

2) The better way (imo), is to simply associate some data with each element and pull that data. So if you give the element a 'data-index' attribute with the value, you can then simply call

$('#myFormID input:radio[name='radioFieldName']:checked').data('index')

And have the value.