Klicken oder ändern Sie das Ereignis im Radio mit jquery

86

Ich habe einige Radios auf meiner Seite und möchte etwas tun, wenn sich das aktivierte Radio ändert. Der Code funktioniert jedoch nicht im IE:

$('input:radio').change(...);

Und nach dem Googeln schlagen die Leute vor, stattdessen den Klick zu verwenden. Aber es funktioniert nicht.

Dies ist der Beispielcode:

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript">
            $('document').ready(
                function(){
                    $('input:radio').click(
                        function(){
                            alert('changed');   
                        }
                    );  
                }
            );

        </script>
    </head>
    <body>
        <input type="radio" name="testGroup" id="test1" />test1<br/>
        <input type="radio" name="testGroup" id="test2" />test2<br/>
        <input type="radio" name="testGroup" id="test3" />test3</br>
    </body>
</html>

Es funktioniert auch nicht im IE.

Also möchte ich wissen, was los ist?

Ich habe auch Angst, ob das Änderungsereignis erneut ausgelöst wird, wenn ich auf ein geprüftes Radio klicke.

AKTUALISIEREN:

Ich kann keinen Kommentar hinzufügen, daher antworte ich hier.

Ich benutze IE8 und der Link, den Furqan mir gibt, funktioniert auch nicht in IE8. Keine Ahnung warum...

jquery radio-button

— hguser
quelle

1

Welche IE-Version verwenden Sie für den Test? Ihr Code funktioniert für mich in IE8. Sie haben Recht, dass das Ereignis ausgelöst wird, wenn Sie auf ein markiertes Radio klicken. Sie müssen Ihren Code überprüfen, um dies zu vermeiden.

— kgiannakakis

es funktioniert für mich, überprüfen Sie die folgenden jsfiddle.net/NerXh

— Furqan Hameedi

111

Dieser Code hat bei mir funktioniert:

$(function(){

    $('input:radio').change(function(){
        alert('changed');   
    });          

});

http://jsfiddle.net/3q29L/

— alexl
quelle

4

Dies funktioniert bei mir nicht, wenn ein einzelnes Radio als Ziel ausgewählt wird und die Auswahl eines anderen Radios die Auswahl des anderen aufhebt.

— Doug Amos

1

Außer wenn die Leistung auf einer Seite mit vielen Elementen ein Problem darstellt. In diesem Fall verwenden Sie $('input[type=radio]')stattdessen (siehe "zusätzliche Hinweise": api.jquery.com/radio-selector )

— jemmons

72

Sie können das Namensattribut wie folgt angeben:

$( 'input[name="testGroup"]:radio' ).change(

— Iwao Nishida
quelle

8

Weniger Mehrdeutigkeit. Viel bessere Übung. +1

— Jacks_Gulch

14

Funktioniert auch bei mir, hier ist eine bessere Lösung ::

Geigen-Demo

<form id="myForm">
  <input type="radio" name="radioName" value="1" />one<br />
  <input type="radio" name="radioName" value="2" />two 
</form>

<script>
$('#myForm input[type=radio]').change(function() {       
    alert(this.value);
});
</script>

Sie müssen sicherstellen, dass Sie jqueryvor allen anderen Import- und Javascript-Funktionen initialisiert haben . Weil $ist eine jqueryFunktion. Sogar

$(function(){
 <code>
});

wird nicht jqueryinitialisiert prüfen oder nicht. Dadurch wird sichergestellt, dass dies erst ausgeführt <code>wird, nachdem alle Javascripts initialisiert wurden.

— suhailvs
quelle

7

Versuchen

$(document).ready(

anstatt

$('document').ready(

oder Sie können eine Kurzform verwenden

$(function(){
});

— rahul
quelle

1

$( 'input[name="testGroup"]:radio' ).on('change', function(e) {
     console.log(e.type);
     return false;
});

Erweitern Sie das Snippet

Diese Syntax ist etwas flexibler, um Ereignisse zu behandeln. Hier können Sie nicht nur "Änderungen" beobachten, sondern auch andere Arten von Ereignissen mit einem einzigen Ereignishandler steuern. Sie können dies tun, indem Sie die Liste der Ereignisse als Argumente an den ersten Parameter übergeben. Siehe jQuery On

Zweitens ist .change () eine Verknüpfung für .on ("change", Handler). Siehe hier . Ich bevorzuge die Verwendung von .on () anstelle von .change, da ich mehr Kontrolle über die Ereignisse habe.

Zuletzt zeige ich einfach eine alternative Syntax, um das Ereignis an das Element anzuhängen.

— Carlos Augusto
quelle

Wie unterscheidet sich das effektiv von Iwao Nishidas Antwort ?

— Alle Arbeiter sind essentiell

Es ist anders, weil es nicht .change (), sondern .on () verwendet. Es gibt keinen Grund, diese Antwort abzulehnen.

— Luis