web-dev-qa-db-fra.com

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

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 la recherche sur Google, les gens suggèrent d’utiliser plutôt le clic. 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?

De plus, je crains que cela ne déclenche le changement si je clique sur une radio cochée?

MISE À JOUR:

Je ne peux pas ajouter de commentaire, alors 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...

jqueryradio-button
84
hguser

Ce code a fonctionné pour moi:

$(function(){

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

});

http://jsfiddle.net/3q29L/

111
alexl

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

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

Cela 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é jquery au-dessus de toutes les autres importations et fonctions javascript. Parce que $ est une fonction jquery. Même

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

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

13
suhailvs

Essayer

$(document).ready(

au lieu de

$('document').ready(

ou vous pouvez utiliser un formulaire abrégé

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

Cette syntaxe est un peu plus souple pour gérer les événements. Vous pouvez non seulement observer les "modifications", mais vous pouvez également contrôler d'autres types d'événements à l'aide d'un seul gestionnaire d'événements. Vous pouvez le faire en transmettant la liste des événements sous forme d'arguments au premier paramètre. Voir jQuery On

Deuxièmement, .change () est un raccourci pour .on ("change", gestionnaire). Voir 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.

0
Carlos Augusto