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

全选：用户点击，在标签上添加已选中的属性，即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;
		}
	}
}