Solución:
¿Por qué no crea simplemente un evento personalizado como, digamos, deselect y dejar que se active en todos los miembros del grupo de radio en el que se hizo clic, excepto en el elemento en el que se hizo clic. Es más fácil hacer uso de la API de manejo de eventos que jQuery proporciona de esa manera.
HTML
<!-- First group of radio buttons -->
<label for="btn_red">Red:</label><input id="btn_red" type="radio" name="radio_btn" />
<label for="btn_blue">Blue:</label><input id="btn_blue" type="radio" name="radio_btn" />
<label for="btn_yellow">Yellow:</label><input id="btn_yellow" type="radio" name="radio_btn" />
<label for="btn_pink">Pink:</label><input id="btn_pink" type="radio" name="radio_btn" />
<hr />
<!-- Second group of radio buttons -->
<label for="btn_red_group2">Red 2:</label><input id="btn_red_group2" type="radio" name="radio_btn_group2" />
<label for="btn_blue_group2">Blue 2:</label><input id="btn_blue_group2" type="radio" name="radio_btn_group2" />
<label for="btn_yellow_group2">Yellow 2:</label><input id="btn_yellow_group2" type="radio" name="radio_btn_group2" />
<label for="btn_pink_group2">Pink 2:</label><input id="btn_pink_group2" type="radio" name="radio_btn_group2" />
jQuery
// Attaching click event handlers to all radio buttons...
$('input[type="radio"]').bind('click', function(){
// Processing only those that match the name attribute of the currently clicked button...
$('input[name="' + $(this).attr('name') + '"]').not($(this)).trigger('deselect'); // Every member of the current radio group except the clicked one...
});
$('input[type="radio"]').bind('deselect', function(){
console.log($(this));
})
Los eventos de deselección se activarán solo entre miembros del mismo grupo de radio (elementos que tienen el mismo name atributo).
solución jsFiddle
EDITAR: Para tener en cuenta todas las posibles ubicaciones de la etiqueta adjunta (que envuelve el elemento de radio o se adjunta a través de un selector de identificación), quizás sea mejor usar onchange evento para activar los controladores. Gracias a Fausto por señalar eso.
$('input[type="radio"]').on('change', function(){
// ...
}
Puede crear un evento de “deselección” personalizado de forma relativamente sencilla, pero como ya ha descubierto, el evento de cambio estándar solo se activa en el botón de opción recién marcado, no en el que se marcó previamente y que acaba de ser desmarcado.
Si desea poder decir algo como:
$("#one").on("deselect", function() {
alert("Radio button one was just deselected");
});
Luego, ejecute algo como la siguiente función desde su controlador de documentos listos (o coloque el código directamente en su controlador de documentos listos):
function setupDeselectEvent() {
var selected = {};
$('input[type="radio"]').on('click', function() {
if (this.name in selected && this != selected[this.name])
$(selected[this.name]).trigger("deselect");
selected[this.name] = this;
}).filter(':checked').each(function() {
selected[this.name] = this;
});
}
Demostración de trabajo: http://jsfiddle.net/s7f9s/2
Lo que hace es colocar un controlador de clic en todas las radios de la página (esto no le impide agregar sus propios controladores de eventos de clic a las mismas radios) que verificará si había una radio previamente seleccionada en el mismo grupo (es decir, con el mismo nombre) y, de ser así, desencadenar un evento “deseleccionar” en ese radio. Luego, guarda el que acaba de hacer clic como el actual. El evento “deseleccionar” no se activa si hace clic en la radio ya marcada o si no había ninguna marcada previamente. los .filter().each() bit al final es tomar nota de qué radios son ya seleccionado. (Si necesita atender más de un formulario en la misma página con grupos de radio independientes del mismo nombre, actualice la función anterior en consecuencia).
Descubrí que la forma más sencilla de hacer esto sin poner un nuevo marco para crear un deselected evento, es hacer cambios alguna botón de radio disparar un update evento en todos de los botones de opción en su grupo y luego defina el comportamiento que desea en el evento de actualización.
La desventaja es que el código en la rama de deselección se ejecutará incluso si el botón de opción no se seleccionó previamente. Si todo lo que está haciendo es mostrar, ocultar o deshabilitar elementos de la interfaz de usuario, eso no debería importar mucho.
Para usar su ejemplo:
buttons = $('input[name="a"]');
buttons.change(function() {
buttons.trigger('update:groupA');
}).bind('update:groupA', function(){
if(this.checked) {
//Do your checked things
} else {
//Do your unchecked things. Gets called whenever any other button is selected, so don't toggle or do heavy computation in here.
}
});