jQuery更改複選框按鈕文本點擊時

我有一些jQuery複選框按鈕，他們工作正常。不過，我想通過點擊來更改文字。例如：按鈕的文字是「點擊我」。當用戶點擊它時，例如，我需要更改爲「感謝點擊」。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>

來源

2011-01-31 Tanner Ottinger

這是你的第一個問題：

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

<label>元素沒有得到「選中」僅他們的複選框做。將其更改爲：

if (this.checked) {

在上面的代碼，this是指已被點擊複選框因素，我們正在尋找，看是否checked屬性包含值true。它效率更高，。

此外，<label>元素沒有<span>的孩子，它只是文字，所以

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

應該

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

但是你可以使用三元conditional operator縮短了整個事情：

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

工作演示：http://jsfiddle.net/AndyE/qnrVp/

來源

2011-01-31 16:27:17

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

而且這裏有一個live demo。

來源

2011-01-31 16:29:35

試試這個：

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

來源

2011-01-31 16:30:33

jQuery更改複選框按鈕文本點擊時

回答

相關問題