【JS】全选、不选、反选复选框（模板）

最新推荐文章于 2021-06-03 18:54:35 发布

原创最新推荐文章于 2021-06-03 18:54:35 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#全选不选反选复选框

Web前端专栏收录该内容

51 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现全选、不选和反选复选框的功能，提供了一个可复用的模板。通过修改部分内容，即可适应不同场景的需求。示例代码包括HTML部分。

今天和大家分享一个全选、不选、反选复选框的例子，这个例子可以当做是一个模板使用，只要把一些数据适当改变以下就OK啦。

这是效果图：

代码如下：

HTML部分：

<input type="button" value="全选"/ id="btn1">
    <input type="button" value="不选"/ id="btn2">
    <input type="button" value="反选"/ id="btn3"><br/>
    <div id="div1">
    	<input type="checkbox"><br/>
	    <input type="checkbox"><br/>
	    <input type="checkbox"><br/>
	    <input type="checkbox"><br/>
	    <input type="checkbox"><br/>
	    <input type="checkbox"><br/>
	    <input type="checkbox"><br/>
	    <input type="checkbox"><br/>
	    <input type="checkbox"><br/>
	    <input type="checkbox"><br/>
	    <input type="checkbox"><br/>
	    <input type="checkbox"><br/>
	    <input type="checkbox"><br/>
	    <input type="checkbox"><br/>
	    <input type="checkbox"><br/>
	    <input type="checkbox"><br/>
	    <input type="checkbox"><br/>
	    <input type="checkbox"><br/>
    </div>

JS部分如下：

window.onload=function(){
		var oBtn1=document.getElementById('btn1');		//全选
		var oBtn2=document.getElementById('btn2');		//不选
		var oBtn3=document.getElementById('btn3');		//反选
		var oDiv=document.getElementById('div1');		//所有复选框的直接父元素
		var aCh=oDiv.getElementsByTagName('input');		//注意此处的获取元素并非使用document，而是oDiv，否则就会选择包括“全选、不选、反选”这三个复选框，显然不合逻辑

		//注：主要使用了checkbox里面的checked属性来设置，该属性有两个值，分别是true或者false
		
		//全选功能
		oBtn1.onclick=function(){
			for(var i=0;i<aCh.length;i++){
				aCh[i].checked=true;
			}
		};

		//不选功能
		oBtn2.onclick=function(){
			for(var i=0;i<aCh.length;i++){
				aCh[i].checked=false;
			}
		};

		//反选功能
		oBtn3.onclick=function(){
			for(var i=0;i<aCh.length;i++){
				if(aCh[i].checked==true){
					aCh[i].checked=false;
				}else{
					aCh[i].checked=true;
				}
			}
		};
	};

希望对大家有帮助，欢迎留下评论一起探讨哈O(∩_∩)O~

Author:致知

Sign:路漫漫其修远兮，吾将上下而求索。