Question

这里有点搞笑。

我想在检查父div时检查复选框，但是当单击CHECKBOX时它是DESELECTING复选框;）

单击名称时工作正常。我该如何解决这个问题？

//layout
<div class="parent">
   <input type="checkbox"/> <a>Name</a>
</div>

//check the box when parent div is clicked
$(".parent").click(function(event){
   event.preventDefault();
   checkbox=$(this).find("input:checkbox");
   checkbox.attr("checked","checked");
});

Answer 1

试试这个。

<div class="parent">
   <input type="checkbox" class="check"/> <a>Name</a>
</div>

$(".parent").click(function(event){
    $(".check:not(:checked)").attr('checked','checked');
});
$(".check").click(function(event){
   event.stopPropagation();
});

jsFiddle是here

Answer 2

我没有尝试过，但我怀疑你可以通过防止事件冒泡来阻止父母的行动：

$(".parent input:checkbox").click(function(event) {
  event.stopPropagation();
});

或者，您可以将您的点击处理程序放在<a>Name</a>元素上，或使用<label>元素而不添加任何JS（这正是<label>的用途）。

Answer 3

尝试添加：

event.stopPropagation();
return false;

到你的事件处理程序。

因此，您的代码如下：

//layout
<div class="parent">
   <input type="checkbox"/> <a>Name</a>
</div>

//check the box when parent div is clicked
$(".parent").click(function(event){
   event.stopPropagation();
   event.preventDefault();

   checkbox=$(this).find("input:checkbox");
   checkbox.attr("checked","checked");

   return false;
});

...

event.stopPropagation（）的文档：
http://api.jquery.com/event.stopPropagation/

当单击触发器在父元素上时，防止取消选中复选框

3 个答案: