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

励志故事

墨衍会员 · AI 创作全网分发码龄12年

关注

原创最新推荐文章于 2025-06-25 16:31:37 发布 1.2k 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

今天和大家分享一个全选、不选、反选复选框的例子，这个例子可以当做是一个模板使用，只要把一些数据适当改变以下就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:路漫漫其修远兮，吾将上下而求索。

收录于