Pourquoi attr() ne met-il pas à jour le code HTML lorsqu'il est appelé une seconde fois?

Question

J'ai un script qui est supposé sélectionner toutes les cases à cocher des entrées descendantes, lorsque la case ancêtre est cochée.

Voir ici: http://jsfiddle.net/zJPfR/

Lorsque la case de niveau supérieur est sélectionné, toutes les cases ci-dessous sont sélectionnés. Si vous désélectionnez la case, les vérifications sont supprimées. Cependant, si vous essayez de le faire une seconde fois, cela ne fonctionne pas.

Si je m'y prends mal, veuillez me le faire savoir.

Darius

 $('.poSelect').click(function() { 
     var expandBox = $(this).parents('.pohelpTbl').next('.expandBox'); 
     var receipts = expandBox.find('input[type="checkbox"]'); 

     if ($(this).is(':checked')) { 
      var status = true; 
     } else { 
      var status = false; 
     } 

     $(receipts).each(function (i) { 
      var cb = $(this); 
      cb.attr("checked",status);   
     }); 
    }); 

Answer 1

Il devrait être

$('.poSelect').click(function() { 
    var receipts = $(this).closest('.pohelpTbl').next('.expandBox').find(':checkbox'); 

    receipts.prop('checked', this.checked); 
}); 

Il n'y a pas besoin de parcourir chacun des receipts articles, vous pouvez appelez .prop() directement sur receipts.

Démo: Fiddle

Answer 2

jQuery utilise uniquement de .attr les attributs initiaux. Utilisez .prop au lieu de .attr pour changer le DOM actuel.
cb.attr("checked",status); =>cb.prop("checked",status);

Answer 3

La présence d'attribut checked est ce qui montre la case à vérifier, pas si la valeur de l'attribut est défini sur true ou false.

changement de ceci:

var cb = $(this); 
cb.attr("checked",status); 

à ceci:

var cb = $(this); 
if (status){ 
    cb.attr("checked","checked"); 
} 
else{ 
    cb.removeAttr("checked"); 
}