jQuery实现复选框全选功能

最新推荐文章于 2022-08-29 21:58:42 发布

紫枫叶520

最新推荐文章于 2022-08-29 21:58:42 发布

阅读量700

点赞数

分类专栏： javascript和jQuery 文章标签： jquery checkbox 全选

本文链接：https://blog.csdn.net/zifengye520/article/details/46273913

版权

javascript和jQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

使用jQuery实现复选框的功能，子框全选后，复选框自动选中；子框有一个未选中，复选框自动切换到未选中状态

js代码部分如下：

<script type="text/javascript">  
        
	function doCheckAll(obj){//点击复选框（全部）
		var isCheck=obj.checked;
<span style="white-space:pre">		</span>var boxs=getAllBox();
		if(boxs!="" && boxs.length>0){
			for(var i=0;i<boxs.length;i++){
				boxs[i].checked=isCheck;
			}
		}
	}
		
	function doCheckOne(obj){//点击复选框（单条数据）
		var isCheck=obj.checked;
		var all=$("input[name='all']")[0];
		if(isCheck==false){
			all.checked=false;
			return;
		}else{
			var boxs=getAllBox();
			var j=0;//选中个数
			for(var k=0;k<boxs.length;k++){
				if(boxs[k].checked==true){
					j++;
				}else{
				<span style="white-space:pre">	</span>break;
				}
			}
			if(j==boxs.length){
				all.checked=true;//全选框选中
			}
		}
	}
		
	function getAllBox(){
		var boxs=$("input[name='one']");
		return boxs;
	}
		
 </script>

页面内容：

<body>
<table align="center" style="border:1px solid;" width="500">
<tr>
	<td><input type="checkbox" name="all" id="checkboxAll" class="checkboxAll" onclick="doCheck(this)" /></td>
	<td>全选</td>
	<td></td>
</tr>
<tr>
	<td><input type="checkbox" onclick="toChkSon(this);" value="1" class="checkboxOne" name="one"  /></td>
	<td>1</td>
	<td>1</td>
</tr>
<tr>
	<td><input type="checkbox" onclick="toChkSon(this);" value="2" class="checkboxOne" name="one"  /></td>
	<td>2</td>
	<td>2</td>
</tr>
<tr>
	<td><input type="checkbox" onclick="toChkSon(this);" value="3" class="checkboxOne" name="one"  /></td>
	<td>3</td>
	<td>3</td>
</tr>
</table>
</body>