Question

我有一个包含复选框的div元素，当我点击div时我希望复选框切换。我通过将以下代码分配给$（＃div）.click：

来完成此操作

$(this).find(":checkbox").prop("checked", !$(this).find(":checkbox").prop("checked"));

现在的问题是，如果单击复选框本身，则仍会执行上面的代码，因此复选框保持相同的状态。我该如何解决这个问题？

Answer 1

事件正在冒泡，你需要停止事件传播，一种方式是

$('#myDiv :checkbox').click(function(e){
    e.stopPropagation();
});

修改

如果您想在div处理事件，请使用此

$('div').click(function(e) {

    // check if the event was triggered by an input box
    if (e.target.nodeName != "INPUT") {
        $(this).find(":checkbox").prop("checked", !$(this).find(":checkbox").prop("checked"));
    }

    // do something else 
    alert('hey there!');

});

演示 - http://jsfiddle.net/QnbhX/

Answer 2

div元素的onclick（），附加一个javascript函数，用于切换复选框输出。这不是一个更简单的方法吗？

Answer 3

你应该使用更好的选择器，如：

$('#myDiv').find(":checkbox").prop("checked", !$(this).find(":checkbox").prop("checked"));

单击容器时创建复选框

3 个答案:

修改