JQuery实现的 checkbox 全选、反选。

发现网上写的全选的代码,不是完整的,是有bug的。全选它分几种情况

1. 全选的checkbox选中时,子checkbox全部选中。反之,全部不选

2.子checkbox中,只要有没有被选中的,取消全选checkbox的选中

3.子checkbox的数量和子checkbox被选中的数量一样时,全选checkbox要被选中


//复选框事件
//全选、取消全选的事件
function selectAll(){
	if ($("#SelectAll").attr("checked")) {
		$(":checkbox").attr("checked", true);
	} else {
		$(":checkbox").attr("checked", false);
	}
}
//子复选框的事件
function setSelectAll(){
	//当没有选中某个子复选框时,SelectAll取消选中
	if (!$("#subcheck").checked) {
		$("#SelectAll").attr("checked", false);
	}
	var chsub = $("input[type='checkbox'][id='subcheck']").length; //获取subcheck的个数
	var checkedsub = $("input[type='checkbox'][id='subcheck']:checked").length; //获取选中的subcheck的个数
	if (checkedsub == chsub) {
		$("#SelectAll").attr("checked", true);
	}
}

全选checkbox的id是SelectAll,子checkbox的id是subcheck。

如果页面还有别的checkbox,selectAll方法里面稍作修改。


JSP页面代码如下:

<input type="checkbox" id="SelectAll"  value="全选" οnclick="selectAll();"/>

<input type="checkbox" id="subcheck"  value="1" οnclick="setSelectAll();"/>
<input type="checkbox" id="subcheck"  value="2" οnclick="setSelectAll();"/>
<input type="checkbox" id="subcheck"  value="3" οnclick="setSelectAll();"/>
<input type="checkbox" id="subcheck"  value="4" οnclick="setSelectAll();"/>






评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值