Why is jquery not detected when the switch is off?

Question

Possible duplicate:
JQuery $ (# radioButton) .change (...) does not work on 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 switch rb2 not selected by selecting rb1, the change event does not fire. Why is this? Is it possible for this to work without changing the selector so that it matches both inputs and then looks at the identifier?

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

Answer 1

A change event is dispatched only when the item itself is actually changed. When you press another radio, you do not change it. The fix would be to observe a change event on each input: radio, and then just check the status of the corresponding switch:

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

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

Answer 2

Listen to the changes at each input related to your group of radio stations, and then check to see if a particular one is selected.

 $("input[name=rb]").change(function () { if ($('#rb2').is(":checked")) { alert('checked'); } else { alert('unchecked'); } }); 

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

Answer 3

You can artificially initiate a “change” on switches from the same group so that the original binding handler comes out and displays “unchecked”. The trick is to avoid getting stuck in an infinite loop by recursively re-triggering the event, we can avoid this by ignoring man-made events that lack the originalEvent property:

 $("input[type=radio]").on("change", function (e) { var $this = $(this); //all inputs with the same name var $targetInputSelector = $("input[name=" + $this.attr("name") + "]"); //check if the handler was fired "naturally" //if yes, trigger the change handler "artificially" for inputs with the same name if (e.hasOwnProperty('originalEvent')) { //exclude the element that was changed "naturally" //from the subset of all the elements with the same name $targetInputSelector.not($this).triggerHandler("change"); } }); 

This code works when added on top of your current handler and satisfies the requirements without changing my selector so that it matches both inputs and then looks at the ID criteria;)

http://jsfiddle.net/a73tn/24/

Answer 4

I came across this question several times a few days ago. Instead of listening to an individual click on the switch, I listen to the click on the <ul> in which I place them, and then call this function to check if it has been selected.

 // Iterate over the radio group and determine if one of them is selected function loopRadBtns(btnGroup) { var isChecked = false; btnGroup.find('input[type="radio"]').each(function() { if($(this).attr('checked')) { isChecked = true; } }); return isChecked; }