jQuery group of radio buttons .change method [duplicate]

Question

I'm working with a form with a radio button which is part of a set of radios and just one can be selected at a time(no problem with the single selection). One of those radios must fire a code each time it's selected a diferent code when it is unselected (another radio is selected), im using .change method and it fires the code when you click it, but not when it looses the selection. What i want is to toggle or be able to know when it looses the selection.

I could do it adding code to the other radios .change method but there are many sets of radios and it would be painful, i'm looking for a one time config.

Edit

The markup is made of ASP MVC Razor engine like this:

@Html.RadioButtonFor(x => x.SomeModel, new { @class = "special-radio" })
@* Other radios but without the 'specia-radio' class *@

js:

// logging
$(function(){
  $('.special-radio').change(function(){
    console.log('change');
  });
});

The string change only appears when you click the 'special-radio' radio.

Salivate

Answer 1

There is no event triggered when a radio is unchecked, because it would be redundant. Try this instead:

http://jsfiddle.net/hmartiro/g4YqD/1/

It puts a change event on the set of radios and just fires one event if the selected radio is special and another event otherwise.

Astrogate

It doesn't fit perfectly into my problem because i've got multiple groups of radios, but it's a good starting point. – Salivate

You can use $('input[name=foo]') if you want to single out one set. – Astrogate

Answer 2

If adding a class for is not possible. You can use a container with identifier for these radio buttons. This way you can isolate the change event. DEMO FIDDLE

var prev_data;
$('#special_radios input').change(function(){
    var me = $(this);
    //running function for check
  $('#log').html('<p>firing event for check: '+ me.attr('id') +'</p>');
    if(prev_data)
      uncheck_method(prev_data);  
  prev_data = me;
});

//@param obj = jquery raidio object
function uncheck_method(obj){
    $('#log').append('<p>firing event for uncheck: '+obj.attr('id')+'</p>');
    obj.prop('checked', false) 
    //console.log($('#special_radios input:checked'));
}

​

html

<input type="radio" name="zz" id="5"/>
<div id="special_radios">
   <input type="radio" name="rx" id="1"/>
   <input type="radio" name="ry"  id="2" />
   <input type="radio" name="rz" id="3"/>
   <input type="radio" name="ra"  id="4"/>
</div>
<div id="log"></div>
​

Aerolite

Answer 3

Simple solution

var newValue; // vale of checked radio button
var oldValue; // value of unchecked radio button

$('.special-radio').change(function(){
    oldValue = newValue;
    newValue = $(this).val();
});

If oldValue and newValue are same that means hasn't unchecked.

Taligrade