jquery - 如何防止默认复选框事件覆盖我的 jQuery 检查/取消选中功能？

Question

我在表格中有一个复选框列表，其中包含一个简单的 jQuery 函数，允许用户单击表格行中的任意位置来选中/取消选中复选框。它工作得很好，除非用户实际点击复选框。那就不行了。有任何想法吗？这是我的代码：

HTML：

<tr onClick="checkBox()">...</tr>

jQuery：

function checkBox() {

var ischecked = $('input#myContacts').attr("checked");

if(ischecked)
{
    $('input#myContacts').attr("checked", false);
}
else
{
    $('input#myContacts').attr("checked", true);
}

return false;
}

Answer 1

您可以使用event.stopPropagation来避免您input#myContacts的点击事件传播到tr点击事件。另外，当您应该使用 jQuery 事件时，我不敢相信您会以这种方式混合 jQuery 和 DOM。

$(document).ready(function(){
  $("input#myContacts").click(function(e){
    e.stopPropagation();
  });
});

Answer 2

解决方案1： http: //jsfiddle.net/qmdGK/3/（使用两个表格单元格但只绑定点击到文本单元格）

解决方案2： http: //jsfiddle.net/qmdGK/4/（在复选框单击事件上使用stopPropagation（））

两者都使用 jQuery 将事件绑定到首选元素。

Answer 3

   <tr class="checkBox">...</tr>


    $(document).ready(function () {
        $('tr.checkBox').live('click', function (e) {
            if (e.target.type !== 'checkbox') {
                $('input#myContacts').attr("checked", function () {
                    return !$(this).prop('checked');
                });

                //Or

                $(this).find('input#myContacts').attr("checked", function () {
                    return !$(this).prop('checked');
                });
            }
        });
    });

Answer 4

如果没有 HTML 显示为什么该功能被触发，很难说。一个 jsFiddle 会很有帮助。只是猜测，但是否可能是您单击了选中它的复选框，但单击事件立即调用了取消选中它的函数？