AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > PHP编程

JQuery实现的 checkbox 全选、反选。

51自学网 2016-09-19 http://www.wanshiok.com

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方法里面稍作修改。
 

<input type="checkbox" id="SelectAll"  value="全选" onclick="selectAll();"/><input type="checkbox" id="subcheck"  value="1" onclick="setSelectAll();"/><input type="checkbox" id="subcheck"  value="2" onclick="setSelectAll();"/><input type="checkbox" id="subcheck"  value="3" onclick="setSelectAll();"/><input type="checkbox" id="subcheck"  value="4" onclick="setSelectAll();"/>



说明
:本教程来源互联网或网友上传或出版商,仅为学习研究或媒体推广,wanshiok.com不保证资料的完整性。
 
上一篇:JQuery(Select option)的操作  下一篇:JQuery框架的AJAX实例代码