3.27日学习笔记 复选框全选、反选、全不选

需求:点击全选btn所有按钮点亮,第一排全选按钮也跟着亮,全不选btn,都不亮。全选按钮根据第二排按钮是否都亮自动选取或取消

html部分

<input type="checkbox" id="allInp">全选<br>
<input type="checkbox" class="inp">
<input type="checkbox" class="inp">
<input type="checkbox" class="inp">
<input type="checkbox" class="inp">
<input type="checkbox" class="inp">
<input type="checkbox" class="inp">
<input type="checkbox" class="inp">
<input type="checkbox" class="inp">
<input type="checkbox" class="inp">
<input type="checkbox" class="inp"><br>
<button id="btn1">全选</button>
<button id="btn2">全不选</button>
<button id="btn3">反选</button>

思路:全选和全不选是一组对立按钮

js代码如下

let inp = document.querySelectorAll('.inp'); // 获取复选框
let allInp = document.getElementById('allInp'); // 获取全选
let btn1 = document.getElementById('btn1'); // 获取三个按钮的节点
let btn2 = document.getElementById('btn2');
let btn3 = document.getElementById('btn3');
let inpCount = 0; // 定义inp的点数初始值为0;
btn1.addEventListener('click', function() {  //给按钮1添加点击事件
  	for (var i = 0; i < inp.length; i++) { // 遍历inp
  		inp[i].checked = true;  // 使inp的checked选中
  		allInp.checked = true;  // 且让全选按钮被选中
  	}
})
btn2.addEventListener('click', function() {
	for (var i = 0; i < inp.length; i++) {
	inp[i].checked = false;
	allInp.checked = false;
	}
})

由于代码量过于冗余,所以封装函数

function all (flag){  // 接受参数,通过参数的值执行代码
	for (var i = 0; i < inp.length; i++) {
		inp[i].checked = flag;
		allInp.checked = flag;
	}
}
btn1.addEventListener('click', function() {
	all(true)
})
btn.addEventListener('click', function() {
	all(false)
})

此时已经可以实现全选和全不选的效果了!!!接着是考虑反选按钮的点击事件了

btn3.onclick = () => {
	for (var i = 0; i < inp.length; i++) {
		inp[i].checked = !inp[i].checked;
	}
	if (inpCount == inp.length) {
		allInp.checked = true;
	}else {
		allInp.checked = false;
	}
}

ok,此时反选按钮的功能也实现了,最后再考虑每个按钮的点击事件了

for (let i = 0; i < inp.length; i++) {
	inp[i].onclick = () => {
		if (inp[i].checked == true) {
			inpCount++;
		} else {
			inpCount--;
		}
		if (inpCount == inp.length) {
			allInp.checked = true;
		} else {
			allInp.checked = false;
		}
	}
}

但此时会出现小bug,全选按钮不会随着第二排选中的数量自动选中或不被选中;想起一开始定义的inpCount用来判断第二排选中的个数,通过控制全选,全不选以及反选来改变inpCount的值,代码如下

function all (flag){
	for (var i = 0; i < inp.length; i++) {  //函数前面基本不变
		inp[i].checked = flag;
		allInp.checked = flag;
	}
	if(flag){ // 当点全选的时候给inpCount赋值
		inpCount = inp.length;
	}else {
		inpCount = 0
	}
}
btn3.onclick = () => {
	for (var i = 0; i < inp.length; i++) {
		inp[i].checked = !inp[i].checked;
	}
	if (inpCount == inp.length) {
		allInp.checked = true;
	}else {
		allInp.checked = false;
	}
	//更新inpConut的值
	inpCount = inp.length - inpCount;//例如 有两个被选中,点击反选就是8个被选中了,此时的inpCount的值应该是 10 - 2 = 8;
}

for (let i = 0; i < inp.length; i++) {
	inp[i].onclick = () => {
		if (inp[i].checked == true) {
			inpCount++;
		} else {
			inpCount--;
		}
		if (inpCount == inp.length) {
			allInp.checked = true;
		} else {
			allInp.checked = false;
		}
	}
}

代码过于多,最后整理代码

let inp = document.querySelectorAll('.inp'); // 获取复选框
let allInp = document.getElementById('allInp'); // 获取全选
let btn1 = document.getElementById('btn1'); // 获取三个按钮的节点
let btn2 = document.getElementById('btn2');
let btn3 = document.getElementById('btn3');
let inpCount = 0; // 定义inp的点数初始值为0;
function all (flag){
	for (var i = 0; i < inp.length; i++) {
		inp[i].checked = flag;
		allInp.checked = flag;
	}
flag?inpCount = inp.length:inpCount = 0;
}
btn1.addEventListener('click', function() {
	all(true)
})
btn.addEventListener('click', function() {
	all(false)
})
allInp.onclick = ()=>{
	all(allInp.checked)
}
btn3.onclick = () => {
	for (var i = 0; i < inp.length; i++) {
		inp[i].checked = !inp[i].checked;
	}
inpCount = inp.length - inpCount;
inpCount == inp.length?allInp.checked = true:allInp.checked = false;
}
for (let i = 0; i < inp.length; i++) {
	inp[i].onclick = () => {
		inp[i].checked == true?inpCount++:inpCount--;
inpCount == inp.length?allInp.checked = true:allInp.checked = false;
	}
}