Javascript实现复选框(全选反选功能)

最新推荐文章于 2023-02-21 15:38:18 发布

最新推荐文章于 2023-02-21 15:38:18 发布 · 210 阅读

文章标签：

#JavaScript #游戏 #ViewUI

web前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个简单的实现网页复选框全选、反选和取消选择功能的方法。通过JavaScript操作DOM元素，利用按钮触发事件来改变一组复选框的状态。此功能对于批量操作如删除等非常实用。

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

在一个项目开发中我们经常见到页面会有复选框的全选和反选功能，这样我们才能够进行下一步的批量删除或者实现其他的功能，那我们应该怎样去实现这样的一个功能呢？其实想要实现复选框的全选和反选功能很简单只要得到复选框的集合判断一下就可以了。

代码实现如下:

	<body>
	<div>
	
	
	<input type="checkbox" name="cxb" value="游戏" />游戏
	<input type="checkbox" name="cxb" value="吃饭" />吃饭
	<input type="checkbox" name="cxb" value="唱歌" />唱歌
	<input type="checkbox" name="cxb" value="跳舞" />跳舞
	<input type="checkbox" name="cxb" value="虚席" />徐诶
	<input type="checkbox" name="cxb" value="徐诶" />学习
	<input type="button" value="全选" onclick="select1(1)"/>//注意select是关键字不能写
	<input type="button" value="反选"  onclick="select1(-1)"/>
	<input type="button" value="取消"  onclick="select1(0)"/>
	
	</div>
	</body>
	
	
	
	<script type="text/javascript">
	   function select1(oper){
	    //alert("11");
	    var arr=document.getElementsByName("cxb");//得到集合
		 for(var i=0;i<arr.length;i++){
	      switch(oper){//没有break就继续执行知道遇到break跳出
		      case 0:
			  case 1:
		       arr[i].checked=oper;
			   break;
			  case -1:
			   arr[i].checked=!arr[i].checked;
			  break;
		  }
	   }
	   
	   }
	
	</script>