Comment écouter les modifications de la valeur sélectionnée d'un groupe de radio à l'aide de JQuery?

Je dois enregistrer un gestionnaire pour un groupe de boutons radio. J'utilise JQuery et espère que sa méthode .change permettrait d'accomplir cela. Cependant, je n'ai pas connu le comportement souhaité.Comment écouter les modifications de la valeur sélectionnée d'un groupe de radio à l'aide de JQuery?

Voici un exemple d'extrait que j'ai écrit. Malheureusement, le "radioValueChanged" est seulement appelé sur le chargement initial. La sélection de true/false ne déclenche pas le gestionnaire.

<html> 
<script src="jquery-1.4.2.min.js" type="text/javascript"></script> 

<form id="myForm"> 
    <div id="Question1Wrapper"> 
     <div> 
      <input type="radio" name="controlQuestion" id="valueFalse" value="0" /> 
      <label for="valueFalse"> 
       False</label> 
     </div> 
     <div> 
      <input type="radio" name="controlQuestion" id="valueTrue" value="1" /> 
      <label for="valueTrue"> 
       True</label> 
     </div> 
    </div> 
    <div id="Question2Wrapper"> 
     <div> 
      <label for="optionalTextBox"> 
       This is only visible when the above is true</label> 
      <input type="text" name="optionalTextBox" id="optionalTextBox" value="" /> 
     </div> 
    </div> 

    <script type="text/javascript"> 
     jQuery(document).ready(function() 
     { 
      $("#controlQuestion").change(radioValueChanged('controlQuestion')); 
     }) 

     function radioValueChanged(radioName) 
     { 
      radioValue = $('input[name=' + radioName + ']:checked', '#myForm').val(); 

      alert(radioValue); 

      if(radioValue == 'undefined' || radioValue == "0") 
      { 
       $('#Question2Wrapper:visible').hide(); 
      } 
      else 
      { 
       $('#Question2Wrapper:visible').show(); 
      } 
     } 
    </script> 
</form>

Source

2010-11-03 Justin

Il y a quelques problèmes ici.

Vous êtes immédiatement en cours d'exécution radioValueChanged('controlQuestion') lors de l'exécution de script parce que c'est un appel de méthode et non pas une affectation de fonction. Le sélecteur $("#controlQuestion") est erroné, vous n'avez aucun élément avec l'ID controlQuestion.
La méthode radioValueChanged ne gère pas correctement les valeurs puisqu'elles sont transmises à un gestionnaire d'événements jQuery.

Vous pouvez essayer quelque chose comme ce qui suit:

jQuery(document).ready(function() 
    { 
     $("input[name='controlQuestion']").change(radioValueChanged); 
    }) 

    function radioValueChanged() 
    { 
     radioValue = $(this).val(); 

     alert(radioValue); 

     if($(this).is(":checked") && radioValue == "0") 
     { 
      $('#Question2Wrapper').hide(); 
     } 
     else 
     { 
      $('#Question2Wrapper').show(); 
     } 
    }

En toute honnêteté, je ne suis pas sûr que ce soit la logique réelle que vous recherchez avec l'instruction if, mais nous espérons que cela fournira une base pour vous de corriger le code actuel.

Source

2010-11-03 20:58:09

Super merci. Comme vous pouvez le dire javascript/jquery est assez nouveau/rouillé. Donc '#' préfixe toujours un identifiant pas un nom ... bon à savoir :) Que fait exactement "$ (this) .is (": checked ")? Je pense que je veux le contraire de cela. Si aucune valeur n'est sélectionnée Je veux que la question soit cachée – Justin

@Justin Oui, les sélecteurs suivent réellement les règles du sélecteur CSS, vous pouvez rechercher w3 pour les sélecteurs css .. hiérarchie, nom, id etc. Le 'is' est aussi une fonction jQuery: http : //docs.jquery.com/Is (bien que je ne l'ai pas trouvé sur api.jquery.com ce qui me concerne) –

'is()' est * certainement * au sous-domaine api: [api.jquery.com /is/](http://api.jquery.com/is/) –

$('#Question2Wrapper:visible').show();

Prenez le : visible, cela ne l'utiliser si la div montre déjà, en effet, il ne sera jamais montré si elle est cachée.

$('#Question2Wrapper').show();

Je digresse, je pense que Quintin frappe la plupart des points. Il y a quelques problèmes qui se passent ici.

Source

2010-11-03 20:57:36

Comment écouter les modifications de la valeur sélectionnée d'un groupe de radio à l'aide de JQuery?

Répondre

Questions connexes