Der OnChange-Ereignishandler für das Optionsfeld (INPUT type = "radio") funktioniert nicht als ein Wert

Ich suche eine allgemeine Lösung dafür.

Betrachten Sie 2 gleichnamige Funkeingänge. Bei der Übermittlung bestimmt der geprüfte Wert den Wert, der mit dem Formular gesendet wird:

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

Das Änderungsereignis wird nicht ausgelöst, wenn ein Optionsfeld deaktiviert ist. Wenn also das Radio mit dem Wert = "1" bereits ausgewählt ist und der Benutzer das zweite auswählt, wird handleChange1 () nicht ausgeführt. Dies stellt (für mich jedenfalls) ein Problem dar, da es kein Ereignis gibt, bei dem ich diese Abwahl abfangen kann.

Was ich möchte, ist eine Problemumgehung für das Ereignis onchange für den Wert der Kontrollkästchengruppe oder alternativ ein Ereignis oncheck, das nicht nur erkennt, wenn ein Radio aktiviert ist, sondern auch, wenn es deaktiviert ist.

Ich bin sicher, einige von Ihnen sind schon einmal auf dieses Problem gestoßen. Was sind einige Problemumgehungen (oder idealerweise der richtige Weg, um damit umzugehen)? Ich möchte nur das Änderungsereignis abfangen, auf das zuvor überprüfte Radio sowie auf das neu überprüfte Radio zugreifen.

PS
onclick scheint ein besseres (browserübergreifendes) Ereignis zu sein, um anzuzeigen, wann ein Radio überprüft wird, aber das nicht überprüfte Problem wird immer noch nicht gelöst.

Ich nehme an, es ist sinnvoll, warum das Ändern eines Kontrollkästchentyps in einem solchen Fall funktioniert, da es den Wert ändert, den es beim Aktivieren oder Deaktivieren des Kontrollkästchens übermittelt. Ich wünschte, die Optionsfelder hätten sich eher wie die Änderung eines SELECT-Elements verhalten, aber was können Sie tun ...

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>

Hier ist eine JSFiddle-Demo: https://jsfiddle.net/crp6em1z/

Ich würde zwei Änderungen vornehmen:

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

1. Verwenden Sie onclickstattdessen den Handler onchange- Sie ändern den "geprüften Status" des Funkeingangs, nicht den value, sodass kein Änderungsereignis auftritt.
2. Verwenden Sie eine einzelne Funktion und übergeben Sie sie thisals Parameter, um zu überprüfen, welcher Wert aktuell ausgewählt ist.

ETA: Zusammen mit Ihrer handleClick()Funktion können Sie den ursprünglichen / alten Wert des Radios in einer Variablen mit Seitenbereich verfolgen. Das ist:

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" />

Wie Sie diesem Beispiel entnehmen können: entnehmen 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);
});

sowohl die clickals auchchange Ereignisse werden ausgelöst, wenn eine Optionsfeldoption ausgewählt wird (zumindest in einigen Browsern).

Ich sollte auch darauf hinweisen, dass in meinem Beispiel das clickEreignis immer noch ausgelöst wird wenn Sie mit Tab und Tastatur eine Option auswählen.

Mein Punkt ist also, dass, obwohl das changeEreignis in einigen Browsern ausgelöst wird, das clickEreignis die Abdeckung bieten sollte, die Sie benötigen.

Was ist mit dem Änderungsereignis von 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/

Wie Sie hier sehen können: http://www.w3schools.com/jsref/event_onchange.asp Das Attribut onchange wird für Optionsfelder nicht unterstützt.

Die erste von Ihnen verknüpfte SO-Frage gibt Ihnen die Antwort: Verwenden Sie onclickstattdessen das Ereignis und überprüfen Sie den Optionsfeldstatus innerhalb der von ihm ausgelösten Funktion.

Ich glaube nicht, dass es eine andere Möglichkeit gibt, als den vorherigen Status zu speichern. Hier ist die Lösung mit 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" />

Nachdem ich ein bisschen mehr darüber nachgedacht hatte, beschloss ich, die Variable loszuwerden und die Klasse hinzuzufügen / zu entfernen. Folgendes habe ich bekommen: http://jsfiddle.net/BeQh3/2/

Ja, es gibt kein Änderungsereignis für das aktuell ausgewählte Optionsfeld. Das Problem ist jedoch, wenn jedes Optionsfeld als separates Element verwendet wird. Stattdessen sollte eine Funkgruppe als ein einzelnes Element betrachtet werden select. Daher wird für diese Gruppe ein Änderungsereignis ausgelöst. Wenn es ein istselect Element handelt, kümmern wir uns nie um jede Option, sondern nehmen nur die ausgewählte Option. Wir speichern den aktuellen Wert in einer Variablen, die zum vorherigen Wert wird, wenn eine neue Option ausgewählt wird. Ebenso müssen Sie eine separate Variable zum Speichern des Werts des aktivierten Optionsfelds verwenden.

Wenn Sie das vorherige Optionsfeld identifizieren möchten, müssen Sie das mousedownEreignis wiederholen .

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

siehe dies: http://jsfiddle.net/diode/tywx6/2/

Speichern Sie das zuvor überprüfte Radio in einer Variablen:
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);

JS BEISPIELCODE

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);

Mir ist klar, dass dies ein altes Problem ist, aber dieser Codeausschnitt funktioniert für mich. Vielleicht wird es jemand in Zukunft nützlich finden:

<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>

Dies ist mir ein Rätsel, aber Sie können für jedes Optionsfeld ein onClick-Ereignis durchführen, ihnen alle unterschiedlichen IDs geben und dann eine for-Schleife im Ereignis erstellen, um jedes Optionsfeld in der Gruppe zu durchlaufen und herauszufinden, welches ist wurde durch Betrachten des Attributs 'geprüft' überprüft. Die ID der aktivierten Variable wird als Variable gespeichert. Möglicherweise möchten Sie jedoch zuerst eine temporäre Variable verwenden, um sicherzustellen, dass sich der Wert dieser Variablen geändert hat, da das Klickereignis auslösen würde, ob ein neues Optionsfeld aktiviert wurde oder nicht.

<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>

Wenn Sie Inline-Skripte vermeiden möchten, können Sie einfach im Radio auf ein Klickereignis warten. Dies kann mit einfachem Javascript erreicht werden, indem ein Klickereignis angehört wird

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);
      }
}

Sie können das folgende JS-Skript hinzufügen

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

das funktioniert bei mir

<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>

Dies ist die einfachste und effizienteste Funktion, mit der Sie einfach so viele Schaltflächen hinzufügen können, wie Sie möchten. Aktivieren Sie das Kontrollkästchen = false und lassen Sie das Onclick-Ereignis jedes Optionsfelds diese Funktion aufrufen. Geben Sie jedem Optionsfeld eine eindeutige Nummer an

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

Am einfachsten und kraftvollsten

schreibgeschützte Funkeingänge mit 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