取消选中复选框时触发点击事件

Question

我有这段HT​​ML：

<tr class="acord">
 <td colspan="4"><input class="marcatodos" type="checkbox" value="1"/>Clientes</td>
</tr>
<tr>
   <td>
      <label>
      <input name="vCliente" class="marcar" type="checkbox" checked="checked" value="1" />
      <span class="lbl"> Visualizar Cliente</span>
      </label>
   </td>
   <td>
      <label>
      <input name="aCliente" class="marcar" type="checkbox" value="1" />
      <span class="lbl"> Adicionar Cliente</span>
      </label>
   </td>
   <td>
      <label>
      <input name="eCliente" class="marcar" type="checkbox" value="1" />
      <span class="lbl"> Editar Cliente</span>
      </label>
   </td>
   <td>
      <label>
      <input name="dCliente" class="marcar" type="checkbox" value="1" />
      <span class="lbl"> Excluir Cliente</span>
      </label>
   </td>
</tr>

和这个jQuery脚本：

$(".acord").click(function() {
   $(this).next("tr").slideToggle(1);
});

这是HTML生成的内容：

jQuery隐藏了一个带有标题（类accord）

的行

我的问题是，当我点击复选框时，jQuery无论如何都会触发它。

如何才能使这个功能只在我复选框外点击时运行？

Answer 1

基本上你需要阻止事件冒泡到tr元素

$('.marcatodos').click(function(e){
  e.stopPropagation();
});

Here是一个显示相同内容的小提琴。

Answer 2

您可以使用click的{​​{1}}属性检查特定元素是否触发了event事件。

target