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

hk8txs48 于 2022-12-12 发布在 jQuery

关注(0)|答案(3)|浏览(149)

下面是一个例子：

<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 fiddle。

**编辑：**我知道代码有点笨拙，但是对于应用程序来说，它需要这样的结构，所以解决方案应该尽可能接近原始的。也就是说，如果能对观察到的行为进行解释，将非常感谢。

jquery

来源：https://stackoverflow.com/questions/7842684/check-inputtype-checkbox-in-jquery-event-handler

3条答案

按热度按时间

mkshixfv1#

使用e.stopPropagation()[docs]而不是return false。后者还可以防止发生默认操作，即切换复选框的状态。
您还应该考虑将事件处理程序绑定到change事件而不是click，鼠标不是切换复选框的唯一方式。您仍然需要添加一个额外的处理程序来防止click事件冒泡。

赞(0）回复(0）举报 2022-12-12

93ze6v8z2#

我想this是你想要的吧？

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

赞(0）回复(0）举报 2022-12-12

vc9ivgsu3#

1.您正在将click绑定到“ul”，您应该将其绑定到“ul〉input”
1.为了避免点击冒泡，你需要使用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');
 });

赞(0）回复(0）举报 2022-12-12

我来回答

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

3条答案

相关问题

热门标签

最新问答