【HTML+CSS+JS】前台简单功能之====复选框（全选/全不选/反选）

最新推荐文章于 2021-06-03 18:00:32 发布

御风泊舟

最新推荐文章于 2021-06-03 18:00:32 发布

阅读量728

点赞数

分类专栏： HTML+CSS+JS 文章标签： js html html5 checkbox

本文链接：https://blog.csdn.net/Lydia233/article/details/107692558

版权

HTML+CSS+JS 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

【HTML+CSS+JS】前台简单功能之====复选框（全选/全不选/反选）

界面效果如下：
在这里插入图片描述
代码如下：
checkBox.html

 <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>复选框操作</title>
	<script type="text/javascript" src="../js/checkBox.js"></script>
</head>
<body>
	<input type="checkbox" id="boxid" onclick="selectAllOrNo();">全选/全不选
	</br></br>
	<input type="checkbox" name="a" />华为</br>
	<input type="checkbox" name="a" />小米</br>
	<input type="checkbox" name="a" />三星</br>
	<input type="checkbox" name="a" />苹果</br>
	<input type="checkbox" name="a" />荣耀</br>
	<input type="checkbox" name="a" />联想</br>
	<input type="checkbox" name="a" />戴尔</br>
	<input type="checkbox" name="a" />酷派</br>
	</br>
	</br>
	<input type="button" value="全选" onclick="selectAll();"/>
	<input type="button" value="全不选" onclick="selectNo();"/>
	<input type="button" value="反选" onclick="selectOthers();"/>
</body>
</html>

checkBox.js

//全选
function selectAll(){
var tag = document.getElementsByName("a");
for(var i = 0;i < tag.length;i++){
	var ai = tag[i];
	ai.checked = true;
   }
}

//全不选
function selectNo(){
	var tag = document.getElementsByName("a");
	for(var i = 0;i < tag.length;i++){
		var ai = tag[i];
		ai.checked = false;
	}
}

//反选
function selectOthers(){
	var tag = document.getElementsByName("a");
	for(var i = 0;i < tag.length;i++){
		var ai = tag[i];
		if(ai.checked == true){
			ai.checked = false;
		}else{
			ai.checked = true
		}
		
	}
}

//全选/全不选
function selectAllOrNo(){
	var sel = document.getElementById("boxid");
	if(sel.checked == false){
		selectNo();
	}else{
		selectAll();
	}
}

御风泊舟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【HTML+CSS+JS】前台简单功能之====复选框（全选/全不选/反选）

【HTML+CSS+JS】前台简单功能之====复选框（全选/全不选/反选）界面效果如下：代码如下：checkBox.html <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>复选框操作</title> <script type="text/javascript" src="../js/checkBox.js"></script&g
复制链接

扫一扫

专栏目录