javascript - 单击容器时制作复选框

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