js实现复选框的全选、取消全选、反选

最新推荐文章于 2023-10-06 21:12:18 发布

骑猪下不来的猴

最新推荐文章于 2023-10-06 21:12:18 发布

阅读量912

点赞数

分类专栏： JavaScript 文章标签： js 复选框全选、取消全选、反选

本文链接：https://blog.csdn.net/weixin_42529699/article/details/81290712

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

思路很简单：

全选：将所有复选框的checked设置为true

取消全选：将所有复选框的checked设置为false

反选：将所有选中的复选框设置为false，未选中的设置为true。即将checked为true的设置为false；false的设为true

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>    
    <title>复选框全选、取消全选、反选</title>

	<script type="text/javascript">
		/*全选/取消全选*/
		var oSports=document.getElementsByName("sport");
		var len=0;
		function selectAll(){
		    if(len == oSports.length){ //当复选框都被选中的时候进行进行取消全选
		        for(var i = 0;i < oSports.length;i++){
		            oSports[i].checked = false; 
		            len = 0;
		        }
		    }else{  //当复选框没有被全选的时候，进行全选
		        for(var i = 0;i < oSports.length;i++){
		            oSports[i].checked = true; 
		            len++;    
		        }
		    }
		}
		/*反选*/
		function revSelect(){
		    for(var i = 0;i < oSports.length;i++){
		        oSports[i].checked = !oSports[i].checked; /*将复选框的checked状态设置为与之前的相反*/
		    }
		}
	
	</script>

  </head>
  
  <body>
    <input type="checkbox" name="sport">篮球<br/>
	<input type="checkbox" name="sport">足球<br/>
	<input type="checkbox" name="sport">羽毛球<br/>
	<input type="checkbox" name="sport">乒乓球<br/>
	<input type="checkbox" name="sport">网球<br/>
	<div>
		<input type="button" value="全选/取消全选"  id="allSelect" onclick="selectAll()"/>
		<input type="button" value="反选"  id="revSelect" onclick="revSelect()"/>
	</div>
  </body>
</html>

骑猪下不来的猴

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
js实现复选框的全选、取消全选、反选

思路很简单：全选：将所有复选框的checked设置为true取消全选：将所有复选框的checked设置为false反选：将所有选中的复选框设置为false，未选中的设置为true。即将checked为true的设置为false；false的设为true &lt;%@ page language="java" import="java.util.*" pageEncoding=...
复制链接

扫一扫