全选与反选

最新推荐文章于 2021-08-28 20:41:46 发布

原创最新推荐文章于 2021-08-28 20:41:46 发布 · 219 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

37 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现网页中复选框全选与反选功能的方法。通过监听全选按钮与反选按钮的点击事件，可以统一设置一组复选框的状态。全选功能使所有复选框的状态与全选按钮保持一致，而反选功能则遍历所有复选框，反转其选中状态。

全选与反选

全选：
1.让 name 为 h的复选框的checked值和当前点击的复选框的checked值保持一致
2.将当前点击的复选框的checked值赋值给后面每一个要操作的复选框
反选：
1.遍历所有复选框，判断哪一个复选框是被选中的，如果被选中就清除checked值
2.否则就设置checked值

//body
	<input type="checkbox" name="qx"/>全选<br>
	<input type="checkbox" name="fx"/>反选<br>
	<input type="checkbox" name="h"/>
	<input type="checkbox" name="h"/>
	<input type="checkbox" name="h"/>
	<input type="checkbox" name="h"/>
	<input type="checkbox" name="h"/>
	<input type="checkbox" name="h"/>
	<input type="checkbox" name="h"/>

//js
	var qx = document.getElementsByName("qx")[0];
	var fx = document.getElementsByName("fx")[0];
	
	var cks = document.getElementsByName("h");
	qx.onclick = function(){
	  for(var i = 0 ; i < cks.length ; i++ ){
	      cks[i].checked = this.checked;
	  }
	}
	fx.onclick = function(){
	  for(var i = 0 ; i < cks.length ; i++ ){
	    if(cks[i].checked){
	      cks[i].checked = false;
	    }else{
	      cks[i].checked = true;
	    } 
	  }
	}

在这里插入图片描述