我们来看看全选全不选的实现原理:
首先毋庸置疑的肯定是先获取元素.然后再来实现一下全选的效果,给全选绑定单击事件,获取全选的选中状态,当点击全选时,遍历每一个选项,让每一个选项的选中状态跟随全选的选中状态来该更,即可实现全选全不选,
单选实现全选,给每一个选项绑定事件,设置一个选中的状态,选中为true,没选中为false,在设置一个来存储单选状态的变量,当选中的时候加一,没选中的减一,判断这个变量是否等于单选的长度,如果等于,让全选的状态为true,否则为false
接下来我们来简单看一看效果图:
下面我们来看看代码的实现过程:
html代码
<div>
全选:<input type="checkbox" />
<hr />
<input type="checkbox" />选项一<br />
<input type="checkbox" />选项二<br />
<input type="checkbox" />选项三<br />
<input type="checkbox" />选项四<br />
</div>
获取元素代码:
var allcheckbox = document.querySelector("input");
var items = document.querySelectorAll("input:nth-child(n+2)");
给全选按钮绑定事件
allcheckbox.onclick = function () {
//2-1.获取全选按钮的选中状态
var sta = allcheckbox.checked;
//checked的值为true,代表选中,值为false,代表未选中
// console.log(sta);
//2-2:把全选按钮的状态设置给每一个小选项
for (var i = 0; i < items.length; i++) {
items[i].checked = sta;
}
}
给每一个单选按钮绑定事件
for (var j = 0; j < items.length; j++) {
items[j].onclick = function () {
//3-1:设置一个标志,标志是否当前所有的按钮都被选中
var flag = true;
//3-2:循环判断是否有未被选中的选项,如果有,flag变为false
for (var n = 0; n < items.length; n++) {
if (items[n].checked == false) {
flag = false;
break;
}
}
//3-3:根据flag的状态修改全选按钮的状态
allcheckbox.checked = flag;
}
}
总结: 原生js到这里就结束了,还有更简单的可以查看,作者vue中v-model实现的全选全不选,有什么不会的随时私信.