小技巧之全选和反选

最新推荐文章于 2024-04-02 19:39:43 发布

枫雨血痕

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量332

点赞数

分类专栏： javascript 前端文章标签： js input复选框小技巧

本文链接：https://blog.csdn.net/lyxuefeng/article/details/80765307

版权

前端同时被 2 个专栏收录

42 篇文章 2 订阅

订阅专栏

javascript

40 篇文章 1 订阅

订阅专栏

思路：使用for循环遍历input选项框，然后使用input的复选框的checded属性实现选中和取消。

关键知识：for循环、input复选框

具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>全选和反选</title>
</head>
<body>
	<div id="top">
		<input type="button" name="btn" value="全选">
		<input type="button" name="btn" value="全不选">
		<input type="button" name="btn" value="反选">
	</div>
	<br/>
	<div id="bottom">
		选项：<input type="checkbox"><br/>
		选项：<input type="checkbox"><br/>
		选项：<input type="checkbox"><br/>
		选项：<input type="checkbox"><br/>
		选项：<input type="checkbox"><br/>
		选项：<input type="checkbox"><br/>
		选项：<input type="checkbox"><br/>
		选项：<input type="checkbox"><br/>
		选项：<input type="checkbox"><br/>
		选项：<input type="checkbox"><br/>
		选项：<input type="checkbox"><br/>
	</div>
</body>
<script type="text/javascript">
	var tops = document.getElementById('top');
	var bottom = document.getElementById('bottom');
	var btns = tops.getElementsByTagName('input');
	var inputs = bottom.getElementsByTagName('input');
	btns[0].onclick = function(){
		for(var i=0;i<inputs.length;i++){
			inputs[i].checked = true;//选中
		}
	}
	btns[1].onclick = function(){
		for(var i=0;i<inputs.length;i++){
			inputs[i].checked = false;
		}
	}
	btns[2].onclick = function(){
		for(var i=0;i<inputs.length;i++){
			if(inputs[i].checked == true){
				inputs[i].checked = false;
			}else{
				inputs[i].checked = true;
			}
		}
	}
</script>
</html>

具体效果：全选和反选

使用函数封装和三元运算符简化代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>全选和反选</title>
</head>
<body>
	<div id="top">
		<input type="button" name="btn" value="全选">
		<input type="button" name="btn" value="全不选">
		<input type="button" name="btn" value="反选">
	</div>
	<br/>
	<div id="bottom">
		选项：<input type="checkbox"><br/>
		选项：<input type="checkbox"><br/>
		选项：<input type="checkbox"><br/>
		选项：<input type="checkbox"><br/>
		选项：<input type="checkbox"><br/>
		选项：<input type="checkbox"><br/>
		选项：<input type="checkbox"><br/>
		选项：<input type="checkbox"><br/>
		选项：<input type="checkbox"><br/>
		选项：<input type="checkbox"><br/>
		选项：<input type="checkbox"><br/>
	</div>
</body>
<script type="text/javascript">
	var tops = document.getElementById('top');
	var bottom = document.getElementById('bottom');
	var btns = tops.getElementsByTagName('input');
	var inputs = bottom.getElementsByTagName('input');
	// 用封装函数简化
		function all(flag){
			for(var i=0;i<inputs.length;i++){
				inputs[i].checked = flag;
			}
		}
		//注意:不能直接btns[0].onclick = all(true);因为函数名(实参)默认执行函数，即没有点击该函数也执行了
		btns[0].onclick = function(){
			all(true);
		}
		btns[1].onclick = function(){
			all(false);
		}
	//使用三元运算符简化
	btns[2].onclick = function(){
		for(var i=0;i<inputs.length;i++){
			inputs[i].checked ? inputs[i].checked = false:inputs[i].checked = true;
		}
	}
</script>
</html>

枫雨血痕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小技巧之全选和反选

思路：使用for循环遍历input选项框，然后使用input的复选框的checded属性实现选中和取消。关键知识：for循环、input复选框具体代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;全选和反选&l
复制链接

扫一扫