在jQuery事件处理程序中检查输入[type=checkbox]

Check input[type=checkbox] in jQuery event handler

本文关键字：type checkbox 输入 检查 jQuery 事件处理 程序      更新时间：2023-09-26

我有以下HTML:

<ul id=list>
    <li>
        <input type=checkbox />
        Item 1
    </li>
    <li>
        <input type=checkbox />
        Item 2
    </li>
    <li>
        <input type=checkbox />
        Item 3
    </li>
</ul>

和对应的JavaScript:

$('ul').bind('click', function(e) {
    if (e.srcElement.tagName.toLowerCase() === 'input') {
        e.srcElement.checked = true;
    }
    return false;
});
    
$('body').bind('click', function() {
    alert('you should see this alert if and only if you did NOT click the list');
})

当我点击一个复选框时，它不会被选中。我想在用户点击它的时候检查它

如何使复选框在用户单击时被选中，但是仍然取消body点击事件处理程序?

我也放了一个JS小提琴

Edit:我理解代码有点笨拙，但它需要以这种方式构建应用程序，因此解决方案应尽可能接近原始。话虽如此，对观察到的行为的解释将是赞赏的。

使用e.stopPropagation() [docs]代替return false。后者还可以防止发生默认操作，即切换复选框的状态。

您还应该考虑将事件处理程序绑定到change事件而不是click，鼠标不是切换复选框的唯一方法。您仍然需要添加一个额外的处理程序来防止click事件冒泡。

我想这就是你想要的?

$('ul').bind('click', function(e) {          
    e.stopPropagation();       
});
$('body').bind('click', function() {
    alert('you only see this alert if and only if you did NOT click the list');
})
  1. 你正在绑定点击到"ul"，你应该将它绑定到"ul> input"

  2. 为了避免点击冒泡，你需要使用event.stopPropagation()取消冒泡我注意到stopPropagation()应该是函数中的第一个。

    $('ul').bind('click', function(e){
    e.stopPropagation();
    if (e.target.tagName.toLowerCase() === 'input') {
       e.target.checked = true;
    }
});
$('body').bind('click', function() {
    alert('you should see this alert if and only if you did NOT click the list');
 });
相关文章：