jQuery変更チェックボックスのボタンのテキスト

Question

jQueryのチェックボックスのボタンがいくつかあり、正常に動作します。ただし、クリックしてテキストを変更したいと思います。たとえば、ボタンのテキストは「クリックしてください」です。ユーザーがクリックすると、たとえば、「クリックしていただきありがとうございました」に変更する必要があります。

<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

これはあなたの最初の問題である：

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

<label>要素は取得しない "にチェック" だけ彼らのチェックボックスが行う

は、これは私が使用してしようとしていますものです。それを変更します。上記のコードでは

if (this.checked) { 

、thisがクリックされたチェックボックスの要素を指し、そして我々はcheckedプロパティに値trueが含まれているかどうかを確認するために探しています。​​がはるかに効率的です。

また、<label>要素はそれほど

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

が

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

する必要がありますしかし、あなたは三元conditional operatorを使用して全体を短縮することができ、それだけでテキストを持って、何<span>子供を持っていません。

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

作業のデモ：http://jsfiddle.net/AndyE/qnrVp/

Answer 2

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

そして、ここではlive demoです。

Answer 3

これを試してみてください：

$("#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"); 
    } 
});