全選是很多項目中必要有的代碼塊
不多說直接上代碼
html代碼
<body>
<table>
<tr>
<th><input type='checkbox' id='allcheck'/></th>
<th>你喜歡什麼</th>
</tr>
<tr>
<td><input type='checkbox' /></td>
<td>天龍八部</td>
</tr>
<tr>
<td><input type='checkbox' /></td>
<td>少年包青天</td>
</tr>
<tr>
<td><input type='checkbox' /></td>
<td>獵場</td>
</tr>
</table>
</body>
javascript（基于jQuery）
$(function(){
//擷取所有的除了全選的checkbox
var cks= $(':checkbox:gt(0)');
//給全選checkbox綁定click事件
var allcheck=$('#allcheck').click(function(){
//讓所有非全選checkbox checked狀态和全選checkbox一緻
cks.prop("checked", $(this).prop("checked"));
})
//每個非全選checkbox綁定事件
cks.click(function(){
if(!$(this).prop('checked')){
//有不是選中的則修改全選的未非選中
allcheck.prop('checked',false);
}else{
//檢查所有的非全選的checkbox是否是選中的
if(cks.filter($(':not(:checked)')).length==){
allcheck.prop('checked',true);
}
}
})
})
覺得有問題請指正！
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)