jQuery Changer le texte du bouton de la case à cocher lorsque vous cliquez sur

Question

J'ai quelques boutons de case à cocher jQuery, et ils fonctionnent bien. Cependant, je voudrais changer leur texte sur un clic. par exemple: le texte du bouton est "cliquez sur moi". lorsque l'utilisateur clique dessus, je dois passer à "merci de cliquer", par exemple.

C'est ce que je suis en train utilisant:

<script> 
    $(function() { 
     $("#button").button(); 
     $("#button").click(function(){ 
      if($("#label").is(':checked')) { 
       $("#label span").text("Hide"); 
      } 
      else { 
       $("#label span").text("Show"); 
      } 
     }); 
    }); 
</script> 
<input id='button' type='checkbox' /> 
<label id='label' for="button">Show/Hide</label> 

Answer 1

Ceci est votre premier problème:

 if($("#label").is(':checked')) { 

<label> éléments ne reçoivent pas "vérifié" que leurs cases à cocher faire. Changer à:

if (this.checked) { 

Dans le code ci-dessus, this fait référence à l'élément de case à cocher qui a été cliqué, et nous cherchons à voir si la propriété checked contient la valeur true. C'est beaucoup plus efficace que .is(':checked').

En outre, l'élément <label> n'a pas d'enfant <span>, il n'a que de texte,

  $("#label span").text("Hide"); 

devrait être

  $("#label").text("Hide"); 

Mais vous pouvez réduire le tout en utilisant la conditional operator ternaire:

$("#button").click(function(){ 
     $("#label").text(this.checked ? "Hide" : "Show"); 
    } 

démonstration de travail: http://jsfiddle.net/AndyE/qnrVp/

Answer 2

$("#button").click(function() { 
    if($(this).is(':checked')) { 
     $("#label").text("Hide"); 
    } else { 
     $("#label").text("Show"); 
    } 
}); 

Et voici un live demo.

Answer 3

Essayez ceci:

$("#button").click(function(){ 
    var th = $(this); 
    if(th.is(':checked')) { 
      $("label[for=" + th.attr('id') + "]").text("Hide"); 
    } else { 
      $("label[for=" + th.attr('id') + "]").text("Show"); 
    } 
});