利用JavaScript实现全选，不选以及不全选

最新推荐文章于 2022-11-13 19:51:30 发布

原创最新推荐文章于 2022-11-13 19:51:30 发布 · 691 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

Javascript 同时被 2 个专栏收录

19 篇文章

订阅专栏

HTML5

6 篇文章

订阅专栏

本文详细介绍如何使用JavaScript实现全选、不选及反选功能。通过修改input表单元素的checked属性，配合按钮操作，实现对多个复选框状态的快速切换。文章提供了具体的代码示例，包括按钮事件监听及数组遍历实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用JavaScript实现全选，不选以及不全选

实现思路

首先我们可以通过编写三个input里面的属性编辑三个 button，分别为全选，不选和不全选。
当我们点击三个不同的按钮完成不同的效果。
在这里我们需要了解关于Iinput表单元素的checked属性，只要将checked属性等于true或者false即可，即true全选，false不选，而后通过数组遍历input即可
再用if语句实现不全选的效果，如果已经选中，则不选，反之同理！

举例说明

<script type="text/javascript">
	window.onload=function(){
		var oBtn1=document.getElementById('btn1');
		var oBtn2=document.getElementById('btn2');
		var oBtn3=document.getElementById('btn3');
		var oDiv1=document.getElementById('div1');
		var select=document.getgetElementsByTagName('input');
		oBtn1.onclick=function(){
				for(var i=0;i<select.length;i++){
						select[i].checked=true;
				}
		}
		oBtn2.onclick=function(){
				for(var i=0;i<select.length;i++){
						select[i].checked=false;
				}
		}
		oBtn3.onclick=function(){
				for(var i=0;i<select.length;i++){
						if(select[i].checked==true){
								select[i].checked==false;
						}
						else{
								select[i].checked==true;
						}
				}
		}
}
</script>

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