CODEWITHSUNDEEP
jquery
Arthur Chaykovski
Arthur Chaykovski

Reputation: 145

Get the index of checked input by input name

I have 2 names of inputs (group1 and group2). How can I get the index of the checked box given one of those names?

<input type="radio" name="group1" value="Milk"> Milk<br>
<input type="radio" name="group1" value="Butter" checked> Butter<br>
<input type="radio" name="group1" value="Cheese"> Cheese
<hr>
<input type="radio" name="group2" value="Water"> Water<br>
<input type="radio" name="group2" value="Beer"> Beer<br>
<input type="radio" name="group2" value="Wine" checked>

For example, if I check the second radio box in group2 ("Beer") it will return 2.

Edit: demo based on feedback; still not working.

Upvotes: 0

Views: 913

Answers (5)

Patric
Patric

Reputation: 72

I'm not sure what you are trying to do. Almost all other answers is about index(), but in your case the second radio buttons index() would not return 2 like you wanted, it would return 1 as the index is 0 based.

This jsfiddle shows how you can get the index / value / score / number of a selected input in a specific group, and how you can sum up values from all selected radio buttons.

<form id="myForm">
     <h3>First Group</h3>

    <input type="radio" name="group1" value="the-first" data-points="0">First</input>
    <input type="radio" name="group1" value="the-second" data-points="20">Second</input>
    <input type="radio" name="group1" value="the-third" data-points="300">Third</input>
    <hr>
    <h3>Second Group</h3>
    <input type="radio" name="group2" value="four" data-points="4">4</input>
    <input type="radio" name="group2" value="five" data-points="5">5</input>
    <input type="radio" name="group2" value="six" data-points="6">6</input>
    <hr>
    <input type="submit" value="Submit" />
</form>

and the javascript/jQuery (using alert instead of console.log for demonstrative purposes) :

$(function () {
    $("#myForm").submit(function () {
        //This gets the checked input in group1
        var g1 = $("input[name='group1']:checked");
        alert("Group 1 \n Selected Value: " + g1.val() + " \n Selected Index: " + g1.index() + "\n Points: " + g1.data('points'));

        var totalPoints = 0;

        //This loops through all checked inputs
        $.each($("input:checked"), function () {
            totalPoints += $(this).data("points");
        });

        alert("Total points from all groups: " + totalPoints);

        return false; //remove if you want to submit
    });
});

Upvotes: 0

colestrode
colestrode

Reputation: 10668

You'll need to find the checked element for each group, then find it's index. Make sure to filter inside the index() function, otherwise it will give the index among all siblings, not just the inputs for that group.

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

EDIT Note the index() function is 0 indexed.

Upvotes: 2

Matyas
Matyas

Reputation: 13702

You could use $.index():

  $('input[type=checkbox]').click(function(){
    var idx = $(this).index();
    // do whatever with the index
  });

See it in action

In the above code (and the presented example) it is important that the checkboxes are grouped in a container that only contains them, since index returns a number representing the index of the element regarding its container.

Upvotes: 0

RafH
RafH

Reputation: 4544

Return the 0 based index of checked input element named "group1"

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

Upvotes: 1

Lawson
Lawson

Reputation: 634

You could use javascript to loop over the buttons, and return the one that is checked:

function getRadioValue(RadioName)
{
var colRadio = document.getElementsByName(RadioName);
for (var i = 0; i < colRadio.length; i++)
{
if (colRadio[i].checked)
{
return colRadio[i].value;
}
return null;
}

vValue = getRadioValue("group1");

Upvotes: 1

Related Questions