Question

Possible Duplicate:
JQuery $(#radioButton).change(…) not firing during de-selection

I have the following HTML/jQuery:

<input id="rb1" type="radio" name="rb" checked="true">
<input id="rb2" type="radio" name="rb">


$("#rb2").change(function () {
    if ($(this).is(":checked")) {
         alert('checked');
    }
    else {
        alert('unchecked');
    }
});

When my rb2 radio button is unselected by selecting rb1, the change event does not fire. Why is this? Is it possible to get this working without changing my selector to match both inputs and then looking at the ID?

Fiddle: http://jsfiddle.net/4uRWR/

Answer 1

The change event only gets sent when you actually modify the item itself. When you click the other radio, you aren’t modifying it. A fix would be to watch the change event on every input:radio, then just check the state of the relevant radio button:

$("input:radio").change(function () {
if ($("#rb2").is(":checked")) {
             alert('checked');
    }
    else {
        alert('unchecked');
    }
});

http://codepen.io/AlienHoboken/pen/akwjB