<table>
<tr>
<td>
<input type="checkbox" name="check" />1
<input type="checkbox" name="check" />2
<input type="checkbox" name="check" />3
<input type="checkbox" name="check" />4
<input type="checkbox" name="check" />5
<input type="checkbox" name="check" />6
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="all" />全選/全不選
<input type="button" name="checkAll" id="checkAll" value="全選" />
<input type="button" name="checkNo" id="checkNo" value="全不選" />
<input type="button" name="checkRev" id="checkRev" value="反選" />
</td>
</tr>
</table>
點擊複選框實現全選/全不選
當點擊全選/全不選的複選框時,DOM對象this.checked獲取的狀態通過prop()方法將所有的複選框設置爲同一狀態,第一次點擊時即爲全選狀態
// 全選/全不選
$("input[name='all']").click(function(){
$("input[name='check']").prop("checked",this.checked);
});
點擊全選按鈕實現全選
當點擊全選按鈕通過:checkbox複選框過濾器將所有的複選框狀態設置爲true即選中狀態。
// 全選按鈕
$("#checkAll").click(function(){
$("input:checkbox").prop("checked",true);
});
點擊全不選按鈕實現複選框全部取消
// 全不選
$("#checkNo").click(function(){
$("input:checkbox").prop("checked",false);
});
將選中的複選框實現反選
// 反選
$("#checkRev").click(function(){
$("input[name='check']").each(function(){
this.checked = !this.checked;
});
});