使用复选框切换单击问题答案

【问题标题】：Toggle click issue with checkbox使用复选框切换单击问题
【发布时间】：2010-12-07 10:58:11
【问题描述】：

请在下面找到代码

$("#chkCopy").toggle(function () {
   copyDetails(); 
},
function () {
   emptyCopyDetails();
});

// functions which do not have any effect on the checkbox
function copyDetails() {

}

function emptyCopyDetails() {
}

问题是复选框未显示选中状态。

Demo

提前致谢

【问题讨论】：

标签： jquery toggle

【解决方案1】：

.toggle() 会中断检查，因为.toggle() 实际上是calls e.preventDefault() on the click event underneath。而不是这种方法，我会推荐这样的东西：

$("#chkCopy").change(function () {
  if(this.checked) {
    copyDetails();
  } else {
    emptyCopyDetails();
  }
});

Here's an updated/working version of your demo with the above approach.

【讨论】：

【解决方案2】：

$("#chkCopy").change(function () {                alert("1");

            },
            function () {
                alert("2");
            });

使用更改而不是切换

【讨论】：

这行不通，.change() 没有 2 个处理程序的重载。
@Nick 你也可以使用 .click()
不...它也不接受 2 个处理程序，.toggle() 是一个特殊功能 :)

【解决方案3】：

来自documentation：

由于.toggle() 内部使用点击处理程序来完成它的工作，我们必须取消绑定click 以删除行为附.toggle()，所以其他 click 处理程序可以在交火。 实施也在活动中致电.preventDefault()，所以链接不会被关注和按钮不会被点击如果 .toggle() 已被调用元素。

因此，如果您希望复选框被选中和取消选中，则不能使用toggle()。您可以改用click()：

$("#chkCopy").click(function() {
   if (this.checked) {
       copyDetails();
   } else {
       emptyCopyDetails();
   }
});

【讨论】：

【解决方案4】：

看看这个答案，你会完成同样的事情

Jquery toggle event is messing with checkbox value

【讨论】：

这个答案是一个不好的例子，因为 this.checked 是一个可直接访问的 DOM 属性，$(this).attr("checked") 是巨大的矫枉过正。