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 = $("#myFormID input:radio[name='radioFieldName']:checked").val();
alert('Selected radio button value = ' + radioVal);
Now I'm trying to find the zero-based index of the checked radio button. I thought it would be relatively simple:
var radioIdx = $("#myFormID input:radio[name='radioFieldName']:checked").index();
However, radioIdx is always returning a value of -1. Any ideas on what I might be doing wrong?
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'));
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']");
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.