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。它.is(':checked')效率更高。

此外，<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/

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

单击时jQuery更改复选框按钮文本

3 个答案: