Grupo de botones de radio: los eventos de cambio para los botones se anulan?

Question

Digamos que tengo un grupo de dos botones de radio:

<input type="radio" name="radioButtonGroup" value="button1" checked="true"/> 
<input type="radio" name="radioButtonGroup" value="button2"/> 

Parece que al hacer clic en el segundo botón activa un controlador de eventos en ese botón sólo. Sin embargo, el primer botón se deselecciona y visualmente cambia. ¿Alguien puede verificar que los eventos se disparen solo en el botón que se seleccionó, y no en ninguno de los otros botones en el grupo que quedan deseleccionados como resultado del clic? ¿Alguna forma ingeniosa de ver un botón de opción para un evento de anulación de selección?

Answer 1

No puedo confirmar que un evento sólo se dispara para el botón seleccionado, pero si tenía que hacer algo con el botón que se acaba seleccionada, la siguiente trabajaría:

$(document).ready(function(){ 
    var selectedRadio = null; 
    $("input:radio").change(function(){   
     if(selectedRadio != null){ 
      alert(selectedRadio.val()); 
     } 
     selectedRadio = $(this); 
    }); 
}); 

En la acción here .

Si necesita realizar un seguimiento de varios grupos de botones de radio, puede hacerlo con una matriz de botones actualmente seleccionados y hacer coincidir dentro de esa matriz cuando se detecte un cambio.

Answer 2

Aunque no se puede confirmar, pero los desencadenantes de cambio de evento no ocurren en todo el grupo.

Si desea que esto suceda, puede hacerlo utilizando diversas bibliotecas JS como jQuery, YUI, etc., o incluso Javascript llano, de la siguiente manera:

function buttonGroupChange(){ 
    var radioElements = document.getElementsByName("radio_group_name"); 
    for(var i = 0; i < radioElements.length; i++){ 
     if(radioElements[i].checked == true){ 
      //do something 
     } 
     else{ 
      //do something 
     } 
    } 
} 

Esta función puede ser llamada en el onClick o el evento onChange.

Espero que resuelva su problema.

Answer 3

En primer lugar, es importante tener en cuenta que un evento "Hacer clic" en cualquiera de los fuegos de la radio DESPUÉS de que el valor "verificado" ya esté actualizado. Esto es importante, porque significa que no puede detectar el elemento anterior una vez que el evento ya se ha activado. Si cancela el evento, en realidad está cambiando el valor ATRÁS - sin detenerlo inicialmente. Esto es importante para la forma en que aborda el problema.

Ejemplo:

<input type="radio" name="radioButtonGroup" value="button1" checked="true"/> 
<input type="radio" name="radioButtonGroup" value="button2"/> 

// At this point, the ':checked' item is button1. 
$('input[type=radio]').bind('click', function (ev) { 
    // If you click on button2 - by this point, the ':checked' item is already button2. 
    ev.preventDefault(); // These two lines will stop the radio from actually 
    ev.stopPropagation(); // changing selection. 

    // At this point, the ':checked' item is set BACK to button1. 
}); 

Debido a esto, la solución más sencilla consiste en replicar el "último" elemento seleccionado en un cierre junto a sus controladores de eventos, de la siguiente manera:

<input type="radio" name="radioButtonGroup" value="button1" checked="true"/> 
<input type="radio" name="radioButtonGroup" value="button2"/> 

<script type="text/javascript"> 
    var $last = $('[name=radioButtonGroup]:checked'); 

    // Select the radio buttons as a group. 
    var $radios = $('[name=radioButtonGroup]').bind('change', function (ev) { 
     // Click event handler 
     var $clicked = $(ev.target); // This is the radio that just got clicked. 
     $last.trigger('unclick'); // Fire the "unclick" event on the Last radio. 

     $last = $('[name=radioButtonGroup]:checked'); // Update the $last item. 

     // Should see the clicked item's "Value" property. 
     console.log("Clicked " + $clicked.attr('value'), $clicked, ev); 
    }).bind('unclick', function (ev) { 
     // Handler for our new "unclick" event. 
     // - fires whenever a radio loses focus. 
     var $unclicked = $(ev.target); // The radio losing it's checked status. 

     // Should see the unclicked item's "Value" property. 
     console.log("Unclicked " + $unclicked.attr('value'), $unclicked, ev); 
    }); 
</script> 

Para un trabajo ejemplo, véase:

http://jsfiddle.net/TroyAlford/wvrtC/

Answer 4

El simpl La naturaleza del botón de opción configurado es que solo se puede seleccionar un botón a la vez. Seleccionar un botón automáticamente significa que los otros no están seleccionados, pero no hay una acción específica para deseleccionar. Por lo tanto, solo debe preocuparse por el único evento, ya que afecta a todos los botones del conjunto a la vez.

Si desea utilizar un elemento que permite selecciones múltiples intente con casillas de verificación.

Answer 5

Si está utilizando jQuery, puede vincular y activar un evento personalizado que le damos el nombre deselect.

Usando el código a continuación definimos el evento deselect.

$(document).ready(function(){ 
    var selectedRadioList = {}; 

    $('input:radio:checked').each(function(){ 
     selectedRadioList[this.name] = this; 
    }); 

    $('input:radio').click(function(){ 
     if(selectedRadioList[this.name]) 
      $(selectedRadioList[this.name]).trigger('deselect'); 

     selectedRadioList[this.name] = this; 
    }); 
}); 

Y ahora podemos obligar a todos los deselect en el que necesitamos.

$(document).ready(function(){ 
    $('input:radio').on('deselect', function(){ 
     alert('radio `' + this.value + '` has been deselected'); 
    }); 
});