原生JavaScript全选、全不选、反选实例

最新推荐文章于 2022-11-13 19:51:30 发布

原创最新推荐文章于 2022-11-13 19:51:30 发布 · 385 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

前端小例子专栏收录该内容

6 篇文章

订阅专栏

博客介绍了前端页面中全选、全不选、反选功能的实现。全选是添加checked=true属性，全不选是移除checked属性，反选是取反checked值。因操作相似，考虑封装为函数以便后续使用，页面布局可按需更换。

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

全选：用户点击，在标签上添加已选中的属性，即checked = true。
全不选：用户点击，在标签上移除checked的属性，即checked=false。
反选：用户点击，使用户原先点击的变为不点击的，用户原先不点击的变为点击的，即checked=!checked。
三者所做操作基本一致，考虑封装为函数作为后续使用。

页面布局：后续可换成任何自己需要的布局。

<form>
	<div><input type="checkbox">多选1</div>
	<div><input type="checkbox">多选2</div>
	<div><input type="checkbox">多选3</div>
</form>
<button onclick="getChecked(0)">全选</button>
<button onclick="getChecked(1)">全不选</button>
<button onclick="getChecked(2)">反选</button>

//选出需进行操作的元素
let btns = document.querySelectorAll('button');
let inputs = document.querySelectorAll('input');
//封装全选、全不选、反选函数
function getChecked(index) {
	for(let i = 0; i < inputs.length; i++){
		if(index == 0){
			inputs[i].checked = true;
		}else if(index == 1){
			inputs[i].checked = false;
		}else {
			inputs[i].checked = !inputs[i].checked;
		}
	}
}