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更改复选框按钮文本点击时

回答

相关问题