web-dev-qa-db-de.com

OnChange-Ereignishandler für Optionsfeld (INPUT-Typ = "Radio") funktioniert nicht als ein Wert

Ich bin auf der Suche nach einer verallgemeinerten Lösung dafür.

Betrachten Sie zwei gleichnamige Funkgeräte. Bei der Übermittlung bestimmt der aktivierte 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 wird. 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 ist (für mich jedenfalls) insofern ein Problem, als 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 Kontrollkästchengruppenwert oder alternativ ein Ereignis "oncheck", das nicht nur erkennt, wenn ein Funkgerät aktiviert ist, sondern auch, wenn es deaktiviert ist.

Ich bin sicher, dass einige von Ihnen dieses Problem schon einmal hatten. Was sind einige Problemumgehungen (oder idealerweise, wie man damit umgeht)? Ich möchte nur das Änderungsereignis abfangen, auf das zuvor aktivierte Radio sowie auf das neu aktivierte Radio zugreifen.

P.S.
onclick scheint ein besseres (browserübergreifendes) Ereignis zu sein, das angibt, wann ein Funkgerät aktiviert ist, das nicht aktivierte Problem jedoch immer noch nicht lö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 sendet, wenn Sie es aktivieren oder deaktivieren. Ich wünschte, die Optionsfelder hätten sich eher wie die Änderungen eines SELECT-Elements verhalten, aber was können Sie tun?.

158
Matthew
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/

153
Michal

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 den onclick -Handler anstelle von onchange - Sie ändern den "überprüften Zustand" des Funkeingangs, nicht den value, sodass kein Änderungsereignis stattfindet.
  2. Verwenden Sie eine einzelne Funktion und übergeben Sie this als Parameter, um zu überprüfen, welcher Wert gerade ausgewählt ist.

ETA: Zusammen mit Ihrer Funktion handleClick() 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;
}
95
Nate Cook

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

wenn Sie eine Optionsfeldoption auswählen (zumindest in einigen Browsern), werden die Ereignisse click und change ausgelöst.

Ich sollte auch darauf hinweisen, dass in meinem Beispiel das click -Ereignis immer noch ausgelöst wird , wenn Sie Tabulator und Tastatur verwenden, um eine Option auszuwählen.

Obwohl das Ereignis change bei einigen Browsern ausgelöst wird, sollte das Ereignis click die Abdeckung liefern, die Sie benötigen.

34
Philip Walton

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/

6
Razan Paul

Ich glaube nicht, dass es eine andere Möglichkeit gibt, als den vorherigen Zustand 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 darüber nachgedacht hatte, beschloss ich, die Variable loszuwerden und eine Klasse hinzuzufügen/zu entfernen. Folgendes habe ich: http://jsfiddle.net/BeQh3/2/

6
Alex Okrushko

Speichern Sie das zuvor aktivierte 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 BEISPIEL CODE

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);
5
Dimitar Bonev

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

<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>
5
John K

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 stattdessen das Ereignis onclick und überprüfen Sie den Status der Optionsschaltfläche innerhalb der Funktion, die sie auslöst.

4
Connum

Ja, für das aktuell ausgewählte Optionsfeld gibt es kein Änderungsereignis. Das Problem ist jedoch, dass jedes Optionsfeld als separates Element betrachtet wird. Stattdessen sollte eine Funkgruppe als ein einzelnes Element wie select betrachtet werden. Das Änderungsereignis wird für diese Gruppe ausgelöst. Wenn es sich um ein select -Element handelt, kümmern wir uns nie um jede darin enthaltene Option, sondern nehmen nur die ausgewählte Option. Wir speichern den aktuellen Wert in einer Variablen, die der vorherige Wert wird, wenn eine neue Option ausgewählt wird. In ähnlicher Weise 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 eine Schleife mit dem Ereignis mousedown ausführen.

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/

4
Diode

Dies ist ein Kinderspiel, aber Sie können für jedes Optionsfeld ein onClick-Ereignis ausführen, ihnen alle unterschiedliche IDs zuweisen und dann eine for-Schleife für das Ereignis erstellen, um jedes Optionsfeld in der Gruppe zu durchlaufen und zu ermitteln, welches das ist wurde anhand des Attributs 'checked' ü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 ändert, da das Klickereignis ausgelöst würde, ob ein neues Optionsfeld aktiviert wurde oder nicht.

2
Andrew Latham

Wenn Sie Inline-Skripte vermeiden möchten, können Sie einfach auf ein Klickereignis im Radio warten. Dies kann mit einfachem Javascript durch Anhören eines Klickereignisses erreicht werden

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

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

Dies ist die einfachste und effizienteste Funktion. Fügen Sie einfach so viele Schaltflächen hinzu, wie Sie möchten, und aktivieren Sie das On-Click-Ereignis für jede Optionsschaltfläche, um diese Funktion aufzurufen. Weisen Sie jedem Optionsfeld eine eindeutige Nummer zu

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