Come posso evitare che l'evento di casella di controllo predefinito ignori la funzione jQuery check/deseleziona?

Question

Ho un elenco di checkbox all'interno di una tabella con una semplice funzione jQuery che consente all'utente di fare clic in qualsiasi punto della riga della tabella per selezionare/deselezionare la casella di controllo. Funziona alla grande, tranne quando l'utente fa effettivamente clic sulla casella di controllo. Allora non funziona. Qualche idea? Qui è il mio codice:

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

È possibile utilizzare event.stopPropagation per evitare che l'evento click di input#myContacts si propaga all'evento click di tr. Inoltre, non posso credere che stai mescolando jQuery e DOM in quel modo ancora, quando dovresti usare jQuery Events.

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

Answer 2

Senza il codice HTML che mostra il motivo per cui tale funzione è innescato da è difficile da dire. Un jsFiddle sarebbe utile. Solo la speculazione, ma potrebbe essere che si fa clic sulla casella di controllo, che lo controlla, ma l'evento click chiama immediatamente quella funzione che deseleziona?

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

Soluzione 1: http://jsfiddle.net/qmdGK/3/ (Utilizzando due celle di tabelle, ma solo click al testo delle cellule vincolante)

Soluzione 2: http://jsfiddle.net/qmdGK/4/ (usando stopPropagation() sull'evento casella click)

Entrambi usano jQuery per associare l'evento all'elemento che è preferito.