cliquez ou changez l'événement à la radio en utilisant jquery

86

J'ai des radios dans ma page, et je veux faire quelque chose lorsque la radio cochée change, mais le code ne fonctionne pas dans IE:

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

Et après googler, les gens suggèrent d'utiliser le clic à la place. Mais ça ne marche pas.

Voici l'exemple de code:

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

Cela ne fonctionne pas non plus dans IE.

Alors je veux savoir ce qui se passe?

Aussi j'ai peur si cela redéclenchera l'événement de changement si je clique sur une radio cochée?

MISE À JOUR:

Je ne peux pas ajouter de commentaire, donc je réponds ici.

J'utilise IE8 et le lien que Furqan me donne ne fonctionne pas non plus dans IE8. Je ne sais pas pourquoi...

jquery radio-button

— hguser
source

1

Quelle version d'IE utilisez-vous pour le test? Votre code fonctionne pour moi dans IE8. Vous avez raison de dire que l'événement se déclenchera si vous cliquez sur une radio cochée. Vous devez vérifier votre code pour éviter cela.

— kgiannakakis

cela fonctionne pour moi, consultez le jsfiddle.net/NerXh

— Furqan Hameedi

111

Ce code a fonctionné pour moi:

$(function(){

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

});

http://jsfiddle.net/3q29L/

— alexl
source

4

Cela ne fonctionne pas pour moi lorsqu'une seule radio est ciblée et que la sélection d'une autre radio entraîne la désélection de l'autre.

— Doug Amos

1

Sauf lorsque les performances sont un problème sur une page avec de nombreux éléments. Dans ce cas, utilisez $('input[type=radio]')plutôt (voir "notes supplémentaires": api.jquery.com/radio-selector )

— jemmons

72

Vous pouvez spécifier l'attribut de nom comme ci-dessous:

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

— Iwao Nishida
source

8

Moins d'ambiguïté. Une bien meilleure pratique. +1

— Jacks_Gulch

14

Fonctionne aussi pour moi, voici une meilleure solution:

démo de violon

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

Vous devez vous assurer que vous avez initialisé jqueryau-dessus de toutes les autres importations et fonctions javascript. Parce que $c'est une jqueryfonction. Même

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

ne vérifiera pas jqueryinitialisé ou non. Cela garantira que <code>ne fonctionnera qu'après l'initialisation de tous les javascripts.

— suhailvs
source

7

Essayer

$(document).ready(

au lieu de

$('document').ready(

ou vous pouvez utiliser un formulaire abrégé

$(function(){
});

— rahul
source

1

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

Développer l'extrait

Cette syntaxe est un peu plus flexible pour gérer les événements. Non seulement vous pouvez observer les «changements», mais ici aussi d'autres types d'événements peuvent être contrôlés en utilisant un seul gestionnaire d'événements. Vous pouvez le faire en passant la liste des événements en tant qu'arguments au premier paramètre. Voir jQuery On

Deuxièmement, .change () est un raccourci pour .on ("change", gestionnaire). Vois ici . Je préfère utiliser .on () plutôt que .change car j'ai plus de contrôle sur les événements.

Enfin, je montre simplement une syntaxe alternative pour attacher l'événement à l'élément.

— Carlos Augusto
source

En quoi est-ce effectivement différent de la réponse d'Iwao Nishida ?

— Tous les travailleurs sont essentiels

il est différent car il n'utilise pas .change () mais .on () Il n'y a aucune raison de voter contre cette réponse.

— luis