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

Question

I have this piece of HTML:

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

and this jQuery script:

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

That's what the HTML generates:

The jQuery hides the row below the one with a title (class accord )

My problem is that when I click on the checkbox, the jQuery triggers it anyway.

How can I make it so the function only runs when I click outside the checkbox?

Answer 1

Basically you need to stop the event from bubbling up to the tr element

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

Here is a fiddle to show the same.

Answer 2

You can check whether a particular element triggered the click event with the event 's target property.

$(".acord").click(function(e) {            // Make your event handler accept an event parameter
    if (e.target.tagName === 'INPUT') {    // Any check against the element
        return;
    } 

    $(this).next("tr").slideToggle(1);
});