El controlador de eventos OnChange para el botón de opción (INPUT type = "radio") no funciona como un valor

Estoy buscando una solución generalizada para esto.

Considere 2 entradas de tipo de radio con el mismo nombre. Cuando se envía, el que está marcado determina el valor que se envía con el formulario:

<input type="radio" name="myRadios" onchange="handleChange1();" value="1" />
<input type="radio" name="myRadios" onchange="handleChange2();" value="2" />

El evento de cambio no se activa cuando se desactiva un botón de radio. Entonces, si la radio con valor = "1" ya está seleccionada y el usuario selecciona la segunda, handleChange1 () no se ejecuta. Esto presenta un problema (para mí de todos modos) en que no hay ningún evento en el que pueda detectar esta des-selección.

Lo que me gustaría es una solución alternativa para el evento onchange para el valor del grupo de casillas de verificación o, alternativamente, un evento oncheck que detecte no solo cuando una radio está marcada sino también cuando no está marcada.

Estoy seguro de que algunos de ustedes se han encontrado con este problema antes. ¿Cuáles son algunas soluciones alternativas (o idealmente, cuál es la forma correcta de manejar esto)? Solo quiero ver el evento de cambio, acceder a la radio previamente verificada, así como a la radio recién verificada.

PS
onclick parece un mejor evento (cross-browser) para indicar cuándo se verifica una radio, pero aún así no resuelve el problema no verificado.

Supongo que tiene sentido por qué onchange para un tipo de casilla de verificación funciona en un caso como este, ya que cambia el valor que envía cuando lo marca o desmarca. Desearía que los botones de radio se comportaran más como el cambio de un elemento SELECT, pero qué puedes hacer ...

var rad = document.myForm.myRadios;
var prev = null;
for (var i = 0; i < rad.length; i++) {
    rad[i].addEventListener('change', function() {
        (prev) ? console.log(prev.value): null;
        if (this !== prev) {
            prev = this;
        }
        console.log(this.value)
    });
}

<form name="myForm">
  <input type="radio" name="myRadios"  value="1" />
  <input type="radio" name="myRadios"  value="2" />
</form>

Aquí hay una demostración de JSFiddle: https://jsfiddle.net/crp6em1z/

Haría dos cambios:

<input type="radio" name="myRadios" onclick="handleClick(this);" value="1" />
<input type="radio" name="myRadios" onclick="handleClick(this);" value="2" />

1. Use el onclickcontrolador en lugar de onchange: está cambiando el "estado verificado" de la entrada de radio, no el value, por lo que no está ocurriendo un evento de cambio.
2. Use una sola función y pase thiscomo parámetro, lo que facilitará verificar qué valor está seleccionado actualmente.

ETA: junto con su handleClick()función, puede rastrear el valor original / antiguo de la radio en una variable de ámbito de página. Es decir:

var currentValue = 0;
function handleClick(myRadio) {
    alert('Old value: ' + currentValue);
    alert('New value: ' + myRadio.value);
    currentValue = myRadio.value;
}

var currentValue = 0;
function handleClick(myRadio) {
    alert('Old value: ' + currentValue);
    alert('New value: ' + myRadio.value);
    currentValue = myRadio.value;
}

<input type="radio" name="myRadios" onclick="handleClick(this);" value="1" />
<input type="radio" name="myRadios" onclick="handleClick(this);" value="2" />

Como puede ver en este ejemplo: http://jsfiddle.net/UTwGS/

HTML:

<label><input type="radio" value="1" name="my-radio">Radio One</label>
<label><input type="radio" value="2" name="my-radio">Radio One</label>

jQuery:

$('input[type="radio"]').on('click change', function(e) {
    console.log(e.type);
});

tanto el clicky changeeventos se activan al seleccionar un botón de opción (por lo menos en algunos navegadores).

También debo señalar que, en mi ejemplo, el clickevento aún se dispara cuando usa la pestaña y el teclado para seleccionar una opción.

Entonces, mi punto es que, aunque el changeevento se dispara en algunos navegadores, el clickevento debe proporcionar la cobertura que necesita.

¿Qué pasa con el uso del evento de cambio de Jquery?

$(function() {
    $('input:radio[name="myRadios"]').change(function() {
        if ($(this).val() == '1') {
            alert("You selected the first option and deselected the second one");
        } else {
            alert("You selected the second option and deselected the first one");
        }
    });
});

jsfiddle: http://jsfiddle.net/f8233x20/

Como puede ver aquí: http://www.w3schools.com/jsref/event_onchange.asp El atributo onchange no es compatible con los botones de opción.

La primera pregunta SO vinculada por usted le da la respuesta: use el onclickevento en su lugar y verifique el estado del botón de radio dentro de la función que activa.

No creo que haya otra forma que no sea almacenar el estado anterior. Aquí está la solución con jQuery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript">
    var lastSelected;
    $(function () {
        //if you have any radio selected by default
        lastSelected = $('[name="myRadios"]:checked').val();
    });
    $(document).on('click', '[name="myRadios"]', function () {
        if (lastSelected != $(this).val() && typeof lastSelected != "undefined") {
            alert("radio box with value " + $('[name="myRadios"][value="' + lastSelected + '"]').val() + " was deselected");
        }
        lastSelected = $(this).val();
    });
</script>

<input type="radio" name="myRadios" value="1" />
<input type="radio" name="myRadios" value="2" />
<input type="radio" name="myRadios" value="3" />
<input type="radio" name="myRadios" value="4" />
<input type="radio" name="myRadios" value="5" />

Después de pensarlo un poco más, decidí deshacerme de la variable y agregar / eliminar clase. Esto es lo que obtuve: http://jsfiddle.net/BeQh3/2/

Sí, no hay evento de cambio para el botón de opción seleccionado actualmente. Pero el problema es cuando cada botón de radio se toma como un elemento separado. En cambio, un grupo de radio debe considerarse un elemento único como select. Por lo tanto, se activa el evento de cambio para ese grupo. Si es un selectelemento, nunca nos preocupamos por cada opción, sino que solo tomamos la opción seleccionada. Almacenamos el valor actual en una variable que se convertirá en el valor anterior, cuando se selecciona una nueva opción. De manera similar, debe usar una variable separada para almacenar el valor del botón de opción marcado.

Si desea identificar el botón de radio anterior, debe realizar un bucle en el mousedownevento.

var radios = document.getElementsByName("myRadios");
var val;
for(var i = 0; i < radios.length; i++){
    if(radios[i].checked){
        val = radios[i].value;
    }
}

mira esto: http://jsfiddle.net/diode/tywx6/2/

Almacene la radio marcada anterior en una variable:
http://jsfiddle.net/dsbonev/C5S4B/

HTML

<input type="radio" name="myRadios" value="1" /> 1
<input type="radio" name="myRadios" value="2" /> 2
<input type="radio" name="myRadios" value="3" /> 3
<input type="radio" name="myRadios" value="4" /> 4
<input type="radio" name="myRadios" value="5" /> 5

JS

var changeHandler = (function initChangeHandler() {
    var previousCheckedRadio = null;

    var result = function (event) {
        var currentCheckedRadio = event.target;
        var name = currentCheckedRadio.name;

        if (name !== 'myRadios') return;

        //using radio elements previousCheckedRadio and currentCheckedRadio

        //storing radio element for using in future 'change' event handler
        previousCheckedRadio = currentCheckedRadio;
    };

    return result;
})();

document.addEventListener('change', changeHandler, false);

CÓDIGO DE EJEMPLO JS

var changeHandler = (function initChangeHandler() {
    var previousCheckedRadio = null;

    function logInfo(info) {
        if (!console || !console.log) return;

        console.log(info);
    }

    function logPrevious(element) {
        if (!element) return;

        var message = element.value + ' was unchecked';

        logInfo(message);
    }

    function logCurrent(element) {
        if (!element) return;

        var message = element.value + ' is checked';

        logInfo(message);
    }

    var result = function (event) {
        var currentCheckedRadio = event.target;
        var name = currentCheckedRadio.name;

        if (name !== 'myRadios') return;

        logPrevious(previousCheckedRadio);
        logCurrent(currentCheckedRadio);

        previousCheckedRadio = currentCheckedRadio;
    };

    return result;
})();

document.addEventListener('change', changeHandler, false);

Me doy cuenta de que este es un problema antiguo, pero este fragmento de código funciona para mí. Quizás alguien en el futuro lo encuentre útil:

<h2>Testing radio functionality</h2>
<script type="text/javascript">var radioArray=[null];</script>
<input name="juju" value="button1" type="radio" onclick="radioChange('juju','button1',radioArray);" />Button 1
<input name="juju" value="button2" type="radio" onclick="radioChange('juju','button2',radioArray);" />Button 2
<input name="juju" value="button3" type="radio" onclick="radioChange('juju','button3',radioArray);" />Button 3
<br />

<script type="text/javascript">
function radioChange(radioSet,radioButton,radioArray)
  {
  //if(radioArray instanceof Array) {alert('Array Passed');}
  var oldButton=radioArray[0];
  if(radioArray[0] == null)
    {
    alert('Old button was not defined');
    radioArray[0]=radioButton;
    }
  else
    {
    alert('Old button was set to ' + oldButton);
    radioArray[0]=radioButton;
    }
  alert('New button is set to ' + radioArray[0]);
  }
</script>

Esto está justo en la parte superior de mi cabeza, pero podría hacer un evento onClick para cada botón de radio, darles todas las ID diferentes y luego hacer un bucle for en el evento para pasar por cada botón de radio en el grupo y encontrar cuál es se verificó mirando el atributo 'verificado'. La identificación de la marcada se almacenaría como una variable, pero es posible que desee usar una variable temporal primero para asegurarse de que el valor de esa variable haya cambiado, ya que el evento de clic activará si se marcó o no un nuevo botón de opción.

<input type="radio" name="brd" onclick="javascript:brd();" value="IN">   
<input type="radio" name="brd" onclick="javascript:brd();" value="EX">` 
<script type="text/javascript">
  function brd() {alert($('[name="brd"]:checked').val());}
</script>

Si desea evitar el guión en línea, simplemente puede escuchar un evento de clic en la radio. Esto se puede lograr con Javascript simple escuchando un evento de clic en

for (var radioCounter = 0 ; radioCounter < document.getElementsByName('myRadios').length; radioCounter++) {
      document.getElementsByName('myRadios')[radioCounter].onclick = function() {
        //VALUE OF THE CLICKED RADIO ELEMENT
        console.log('this : ',this.value);
      }
}

Puede agregar el siguiente script JS

<script>
    function myfunction(event) {
        alert('Checked radio with ID = ' + event.target.id);
    }
    document.querySelectorAll("input[name='gun']").forEach((input) => {
        input.addEventListener('change', myfunction);
    });
</script>

esto funciona para mi

<input ID="TIPO_INST-0" Name="TIPO_INST" Type="Radio" value="UNAM" onchange="convenio_unam();">UNAM

<script type="text/javascript">
            function convenio_unam(){
                if(this.document.getElementById('TIPO_INST-0').checked){
                    $("#convenio_unam").hide();
                }else{
                    $("#convenio_unam").show(); 
                }                               
            }
</script>

Esta es la función más fácil y más eficiente de usar, simplemente agregue tantos botones como desee al marcado = falso y haga que el evento onclick de cada botón de radio llame a esta función. Designe un número único para cada botón de radio

function AdjustRadios(which) 
{
    if(which==1)
         document.getElementById("rdpPrivate").checked=false;
    else if(which==2)
         document.getElementById("rdbPublic").checked=false;
}

La manera más fácil y poderosa

leer solo entradas de radio usando getAttribute

document.addEventListener('input',(e)=>{

if(e.target.getAttribute('name')=="myRadios")
console.log(e.target.value)
})

<input type="text"  value="iam text" /> 
<input type="radio" name="myRadios" value="1" /> 1
<input type="radio" name="myRadios" value="2" /> 2