Activer/désactiver la visibilité de la zone de texte en fonction de l'état de la case à cocher - jquery

Question

J'ai donc une liste de courses pour un formulaire de survenance. il y a une case nommée 'autre spécifiez' pour les personnes qui ne répondent à aucun des autres critères. J'ai besoin d'un livre de texte pour devenir visible quand 'autre spécifie' est coché, et pour disparaître quand ce n'est pas le cas. J'ai pu faire apparaître la boîte quand une autre est cochée, mais pas disparaître quand elle a été décochée. Toute aide serait grandement appréciée. Merci.

---

JScript

<script type="text/javascript" src="jquery.js"> 
<script language="JavaScript"> 

$(function(){ 
    $('#other').click(function(){ 
    $('#otherrace').toggle(
      function(event) { 
      $(event.target).css('visible'); 
      }, 
      function(event) { 
      $(event.target).css('hidden'); 
      } 
     ); 
     }); 


    </script> 

---

html

<input type="checkbox" name="race" id="other"value="other" />Other, specify<br /> 
<div style="visibility:hidden" id="race"><input type="text" name="fname" size="25" maxlength="25" id="otherrace" /></div> 

Answer 1

Est-ce que cette façon:

Exemple:http://jsfiddle.net/patrick_dw/K3kvE/

$('#other').change(function(){ 
    $('#otherrace').parent().css('visibility', this.checked ? 'visible' : 'hidden'); 
}); 

ou utiliser display:none au lieu de visibility:hidden et faire:

Exemple:http://jsfiddle.net/patrick_dw/K3kvE/1/

$('#other').change(function(){ 
    $('#otherrace').parent().toggle(this.checked); 
}); 

La façon dont vous utilisiez .toggle() était comme un "événement bascule", ce qui signifie que vous étaient effectivement assigner un événement de clic qui bascule entre l'exécution des fonctions que vous lui passez.

Parce qu'il est le parent de otherrace qui est caché, vous devez parcourir jusqu'à l'aide .parent(), puis définissez sa propriété visibility-hidden ou visible en fonction de l'état de la case à cocher.

La deuxième solution passe de l'utilisation de la propriété visibility à l'utilisation de display afin que toggle() puisse être appelée d'une manière différente. La façon dont il est appelé maintenant, il bascule entre show() et hide(), ce qui définit la propriété display de none à son réglage d'origine et vice versa.