jquery检查所有复选框并将类添加到行？

Question

我想添加一个类到我的tr行如果选择所有复选框已被选中，但我似乎无法得到添加类的工作（然后显然删除它们，如果检查全部已被取消选择），我我正在使用切换每个单独的行添加/删除类，但似乎无法得到它的全部检查工作。

这里是我的表：

<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

你不能用一个ID在这里，因为它的重复，而是使用一类像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>