jquery проверить все флажки и добавить класс в строки?

Question

Я пытаюсь добавить класс в мои три строки, если выбран флажок «Выбрать все», но я не могу заставить класс добавления работать (а затем, очевидно, удалить их, если все было отменено), я я использую toggle на каждой отдельной строке для добавления/удаления класса, но не могу заставить его работать для проверки всех.

Вот мой стол:

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

Вот мой 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

Вы не можете использовать идентификатор здесь, так как это повторяется, вместо того, чтобы использовать класс как class="checkbox" вместо id="checkbox", как это :

$("#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. Также обратите внимание на использование change вместо click, поэтому правильное состояние, использование closest() для получения ближайшего родителя этого селектора и вызов .change() во всех меняющихся флажках, чтобы их класс строк был обновлен правильно.

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>