Radio button-group - change-Ereignisse für Schaltflächen werden deaktiviert?

Sagen wir, ich habe eine Gruppe von zwei radio-buttons:

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

Scheint es, dass beim klicken auf die zweite Taste löst ein Ereignis-handler auf die Schaltfläche nur. Jedoch, die erste Schaltfläche wird deaktiviert, und optisch nicht verändert. Kann jemand überprüfen, ob Ereignisse ausgelöst werden nur auf die Taste, die ausgewählt wurde, und nicht eine der anderen Schaltflächen in der Gruppe, die werden abgewählt, die als Ergebnis der auf? Jeder clevere Art und Weise zu beobachten, ein radio-button für das deaktivieren-Ereignis?

  • Bitte wählen Sie eine Antwort als die richtige, oder angeben, welche weiteren Informationen Sie benötigen, um zu lösen Ihr Problem.
InformationsquelleAutor morgancodes | 2010-07-26
  1. 1

    Obwohl es nicht bestätigt werden kann, aber der event-änderung stößt nicht zufällig auf die gesamte Gruppe.

    Wenn Sie wollen, dass dies geschieht, kann man es mit verschiedenen JS Bibliotheken wie jQuery, YUI, etc.. oder auch nur javascript, wie folgt:

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

    Kann diese Funktion aufgerufen werden, die auf das onClick oder onChange-Ereignis.

    Ich hoffe, dass löst Ihr problem.

    InformationsquelleAutor Yash
  2. 1

    Erstens, es ist wichtig zu beachten, dass ein "Klick" - Ereignis auf den radios ausgelöst, NACHDEM Sie den "checked" Wert ist bereits aktualisiert. Dies ist wichtig, weil es bedeutet, dass Sie nicht erkennen können das Vorherige Element einmal die Veranstaltung ist bereits gefeuert. Wenn Sie das Ereignis Abbrechen, sind Sie tatsächlich ändern Sie den Wert ZURÜCK - nicht zu stoppen, es zunächst. Dies ist wichtig, um, wie Sie nähern sich das problem.

    Beispiel:

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

    Weil dies die einfachste Lösung zu verfolgen, die "letzten" ausgewählte Objekt in eine closure neben Ihrem event-Handler wie folgt:

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

    Für ein Beispiel, siehe:

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

    InformationsquelleAutor Troy Alford
  3. 0

    Kann ich nicht bestätigen, dass ein Ereignis wird nur gefeuert, die für die ausgewählte Schaltfläche, aber wenn Sie etwas tun müssen mit der Taste, war nur deaktiviert, die folgenden funktionieren würde:

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

    In Aktion hier.

    Wenn Sie brauchen, um zu verfolgen mehrere Gruppen von radio-buttons, die Sie tun könnten, mit einem array der aktuell ausgewählten Tasten und match innerhalb des Arrays, wenn eine änderung erkannt wird.

    • Vielen Dank Pat. Wahrscheinlich werde ich bauen meine eigene radio-Gruppe reprentation in JS, das wird funktionieren, nur eben nicht so schön wie seins in der Lage, Haken in Ereignisprozeduren für die einzelnen Schaltflächen.
    InformationsquelleAutor Pat
  4. 0

    Die einfache Natur der radio-button-set ist, dass nur ein button ausgewählt werden kann, zu einem Zeitpunkt. Die Auswahl einer Schaltfläche automatisch bedeutet, dass die anderen die nicht ausgewählt sind, aber es gibt keine spezifische Aktion für das aufheben. Daher, Sie brauchen nur zu befürchten, dass das eine Ereignis, denn es wirkt sich auf alle Schaltflächen in der Menge auf einmal.

    Wenn Sie möchten, um ein element zu verwenden, der es ermöglicht, mehrere Auswahlen versuchen Checkboxen.

    InformationsquelleAutor
  5. -1

    Wenn Sie jQuery Sie können binden und lösen Sie ein benutzerdefiniertes Ereignis, das wir nennen es deselect.

    Mit folgenden code definieren wir die deselect Veranstaltung.

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

    Und jetzt können wir binden deselect jeder, wo wir Sie brauchen.

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