Javascript 单击容器时设置复选框

我有一个包含复选框的div元素，当我单击该div时，我希望该复选框能够切换。 为此，我将以下代码分配给$（#div）。单击：

现在的问题是，如果单击复选框本身，上面的代码仍然会执行，因此复选框保持相同的状态。

---

如何解决此问题？

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

$('#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!');

});​

---

Demo-

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

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

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

---

你能使用比$（这个）更好的选择器吗？请显示相关代码。尽管复选框的状态现在为“正确”，但此解决方案会阻止div.click事件中的所有代码。我使用了你的代码，几乎使复选框切换两次而不是一次。谢谢萨格里德。它就是这样做的。div.click永远不知道如果选中“完成”复选框，是否进行了单击。如果你想让它知道，那么有一种不同的方法可以做到这一点。。更新

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