jquery cochez toutes les cases et ajoutez la classe aux lignes?

Question

J'essaie d'ajouter une classe à mes tr lignes si la case à cocher tout sélectionner a été sélectionnée, mais je n'arrive pas à faire fonctionner la classe add (et ensuite les supprimer si tout a été désélectionné), J'utilise toggle sur chaque ligne pour ajouter/supprimer la classe, mais je n'arrive pas à la faire fonctionner correctement.

Voilà ma table:

<form> 
<table cellspacing="0" cellpadding="0" class="tablesorter" id="table"> 
    <thead> 
    <tr> 
     <th valign="middle" align="left" class="filebox"><input type="checkbox" id="checkall" name="checkall"></th> 
     <th valign="middle" align="left" class="header filename"><strong>Filename</strong></th> 
     <th valign="middle" align="left" class="header filesize"><strong>Size</strong></th> 
     <th valign="middle" align="left" class="header filedate"><strong>Date</strong></th> 
    </tr> 
    </thead> 
    <tbody class="file"> 
    <tr> 
     <td valign="middle" align="left" class="filebox"><input type="checkbox" id="checkbox" name="checkbox"></td> 
     <td valign="middle" align="left" class="filename">Search48.png</td> 
     <td valign="middle" align="left" class="filesize">6 KB</td> 
     <td valign="middle" align="left" class="filedate">21/10/2010</td> 
    </tr> 
    <tr> 
     <td valign="middle" align="left" class="filebox"><input type="checkbox" id="checkbox" name="checkbox"></td> 
     <td valign="middle" align="left" class="filename">shopping_trolley48.png</td> 
     <td valign="middle" align="left" class="filesize">3 KB</td> 
     <td valign="middle" align="left" class="filedate">21/10/2010</td> 
    </tr> 
    </tbody> 
</table> 
</form> 

Voici mon code jquery:

//check all checkboxes 
$("#checkall").click(function() { 
    $(this).parents("#table:eq(0)").find(":checkbox").attr("checked", this.checked); 
}); 

//add highlight to tr 
$("#checkbox").click(function() { 
    $(this).parent().parent().toggleClass("highlight"); 
}); 

Answer 1

Vous ne pouvez pas utiliser un ID ici car il est répété, utilisez plutôt une classe comme class="checkbox" au lieu de la id="checkbox", comme celui-ci :

$("#checkall").change(function() { 
    $(this).closest("table").find(":checkbox").attr("checked", this.checked).change(); 
}); 

$(".checkbox").change(function() { 
    $(this).closest('tr').toggleClass("highlight", this.checked); 
}); 

You can test it out here. Notez également l'utilisation de change au lieu de click donc l'état est correct, l'utilisation de closest() pour obtenir le parent le plus proche de ce sélecteur, et en appelant .change() sur toutes les cases à cocher que vous modifiez, afin que leur classe de ligne soit mise à jour correctement.

Answer 2

http://beckelman.net/2008/11/18/select-all-checkboxes-in-a-table-column-with-and-without-jquery-plugin-demo/

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#tableOne thead tr th:first input:checkbox").click(function() { 
     var checkedStatus = this.checked; 
     $("#tableOne tbody tr td:first-child input:checkbox").each(function() { 
      this.checked = checkedStatus; 
     }); 
    }); 

}); 
</script>