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