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

Question 1

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

Question 2

Ce code a fonctionné pour moi:

$(function(){

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

});

http://jsfiddle.net/3q29L/

Question 3

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

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

Question 4

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.

Question 5

Essayer

$(document).ready(

au lieu de

$('document').ready(

ou vous pouvez utiliser un formulaire abrégé

$(function(){
});

Question 6

$( '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.

Answer 1

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

Answer 2

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

Answer 3

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

Furqan Hameedi

Answer 4

111

Ce code a fonctionné pour moi:

$(function(){

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

});

http://jsfiddle.net/3q29L/

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

Answer 5

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

Answer 6

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

Answer 7

72

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

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

Iwao Nishida
la source

8

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

Jacks_Gulch

Answer 8

8

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

Jacks_Gulch

Answer 9

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.

Answer 10

7

Essayer

$(document).ready(

au lieu de

$('document').ready(

ou vous pouvez utiliser un formulaire abrégé

$(function(){
});

rahul
la source

Answer 11

$( '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.

Answer 12

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

Tous les travailleurs sont essentiels

Answer 13

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

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

Réponses:

démo de violon