JavaScript学习笔记之js实现复选框checkbox的全选、反选示例

最新推荐文章于 2024-12-15 15:26:07 发布

manny-liu

最新推荐文章于 2024-12-15 15:26:07 发布

阅读量1k

点赞数

分类专栏： javascript 文章标签： javascript checkbox

本文链接：https://blog.csdn.net/manmanwei/article/details/74910738

版权

javascript 专栏收录该内容

18 篇文章

订阅专栏

1.选中全选复选框，则其他的复选框自动全部选中；

2.已选中全选复选框，再次点击全选复选框，则其他复选框全部不选中；

3.当全部其他复选框都被选中时，全选复选框自动被选中；

4.当全部其他复选框没有被全部选中时，全选复选框不被选中。

效果截图如下：

<body>
	<input type="checkbox" name="checkbox" value="Car" οnclick="isSelectAll()">I am manman <br>
	<input type="checkbox" name="checkbox" value="Car" οnclick="isSelectAll()">I am manman <br>
	<input type="checkbox" name="checkbox" value="Car" οnclick="isSelectAll()">I am manman <br>
	<input type="checkbox" name="checkbox" value="Car" οnclick="isSelectAll()">I am manman <br>
	<input type="checkbox" name="checkbox" value="Car" οnclick="isSelectAll()">I am manman <br>
	<input type="checkbox" name="checkbox" value="Car" οnclick="isSelectAll()">I am manman <br>
	<input type="checkbox" name="" value="all" id="all" οnclick="selectAll()">全选 <br>	
 </body>
 <script>
	function selectAll(){//全选复选框控制其他复选框
		var checkBoxList =  document.getElementsByName("checkbox");
		var allSelect = document.getElementById("all");
		if(allSelect.checked){
			for(var i=0;i<checkBoxList.length;i++){
				checkBoxList[i].checked="checked";
			}
		}else{
			for(var i=0;i<checkBoxList.length;i++){
				checkBoxList[i].checked="";
			}
		}
	}
	function isSelectAll(){//其他复选框控制全选复选框
		var checkBoxList =  document.getElementsByName("checkbox");
		var allSelect = document.getElementById("all");
		var allSelectFlag = true;	
		for(var i=0;i<checkBoxList.length;i++){
			if(!checkBoxList[i].checked){
				allSelectFlag = false;
			}
		}
		if(allSelectFlag){
			allSelect.checked="checked";
		}else{
			allSelect.checked="";
		}
	}
 </script>