原生js的全选全不选

我们来看看全选全不选的实现原理:
         首先毋庸置疑的肯定是先获取元素.然后再来实现一下全选的效果,给全选绑定单击事件,获取全选的选中状态,当点击全选时,遍历每一个选项,让每一个选项的选中状态跟随全选的选中状态来该更,即可实现全选全不选,
        单选实现全选,给每一个选项绑定事件,设置一个选中的状态,选中为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实现的全选全不选,有什么不会的随时私信.