实现思想
全选checkbox的click事件和每行的单个checkbox的click事件分别都要实现。
1.全选checkbox的click事件:
如果全选checkbox的状态如果为选中(checked)时,每行的单个checkbox的checked属性全部设置为true;
反之,则设置为false.
2.每行的单个checkbox的click事件
如果该行的checkbox未选中时,全选checkbox的checked属性全部设置为false;
反之,则判断所有行的checkbox都被选中时,则全选checkbox设置为true.
上面2的实现容易被忽视。
Html实现:
<script type="text/javascript">
// 初始化DOM加载
$(function(){
// 全选/反选
checkAll("chkAll", "chkItem");
});
</script>
......
<div id="listHeader">
<table class="listTb">
<tr class="listTr">
<td width="5%" class="listTd" align="left">
<input id="chkAll" name="chkAll" type="checkbox" />
</td>
<th width="10%" class="listTh">No</th>
</tr>
</table>
</div>
<div id="listData">
<table class="listTb">
<tr class="listTr">
<td width="5%" class="listTd" align="center">
<input id="chkItem" name="chkItem" type="checkbox" value="1" />
</td>
<td width="10%" class="listTd">1</td>
</tr>
<tr class="listTr">
<td width="5%" class="listTd" align="center">
<input id="chkItem" name="chkItem" type="checkbox" value="2" />
</td>
<td width="10%" class="listTd">2</td>
</tr>
<tr class="listTr">
<td width="5%" class="listTd" align="center">
<input id="chkItem" name="chkItem" type="checkbox" value="3" />
</td>
<td width="10%" class="listTd">3</td>
</tr>
</table>
</div>
......
js实现:
/**
*全选/反选* @para chkAllId 全选checkbox的id
* @para chkSubName 每行单个checkbox的name
*/
function checkAll(chkAllId, chkSubName) {
var objAll = $("#"+chkAllId);
var objSub = $("[name = "+chkSubName+"]:checkbox");
// 全选按钮
objAll.click(function(){
if ($(this).is(':checked')) {
objSub.prop("checked", true);
} else {
objSub.prop("checked", false);
}
});
// 每行的单选框选中时
objSub.click(function(){
//当没有选中某个子复选框时,SelectAll取消选中
if (!$(this).is(':checked')) {
objAll.prop("checked", false);
}
var chsub = objSub.length; //获取subcheck的个数
var checkedsub = $("[name = "+chkSubName+"]:checkbox:checked").length; //获取选中的subcheck的个数
if (checkedsub == chsub) {
objAll.prop("checked", true);
}
});
}