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 Events时，我无法相信你正在以这种方式混合使用jQuery和DOM。

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

Answer 2

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

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

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

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

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

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

4 个答案: