Question

I have three radio buttons like this:

<input type="radio" name="P_1" value="1">Yes</input>
<input type="radio" name="P_1" value="2">No</input>

<input type="radio" name="P_2" value="1">Yes</input>
<input type="radio" name="P_2" value="2">No</input>

<input type="radio" name="P_3" value="1">Yes</input>
<input type="radio" name="P_3" value="2">No</input>

I am trying to add a listener to each of these radio buttons so that I will be notified when they change. I am doing something like this:

for (var i = 1; i <= 3; i++) {
            $("input[name='P_" + i + "']").live('change', function () {
                doProcessing("P_" + i, $("input[name='P_" + i + "']:checked").val());
            });
}

However, this does not seem to work. It calls doProcessing with i set to 4 because that is the value of i at the end of the for loop. What is the correct way of adding an event handler in my case?

Answer 1

Try

$('input:radio').on('change', function(){
    //access value of changed radio group with $(this).val()
});

Or, if you’re using < jQuery 1.7

$('input:radio').live('change', function(){
    //do stuff with $(this).val()
});