Question

I have the following HTML:

<div class="row1">
    <input type="radio" name="group1" value="0" checked="checked"/>Zero
    <input type="radio" name="group1" value="1" />One
</div>

<div class="row2">
    <input type="radio" name="group2" value="0" checked="checked" />Zero
    <input type="radio" name="group2" value="1" />One
</div>

Along with the following jQuery code:

$(document).ready(function() {
    var val1 = "";
    var val2 = "";

    $('input[name="group1"],input[name="group2"]').change(function() {
        val1 = $('input[name="group1"]').val();
        val2 = $('input[name="group2"]').val();
        alert(val1 + " : " + val2);
    });

});

Now, my expected result is that when one of the radio buttons is changed, it gets the selected values of both radio buttons and displays them in an alert box.

As you can see using my jsFiddle here: http://jsfiddle.net/2whkp/ The result is always 0:0. I have a feeling this may be due to it always just getting the first radio button by that name. If that is the case however, how would I work around this?

Thanks in advance,

Dave

Answer 1

Add the :checked filter to your selector and it will work. e.g.

val1 = $('input[name="group1"]:checked').val();
val2 = $('input[name="group2"]:checked').val();