目录
一、主要功能介绍：
二、JS代码详细步骤解析：
JS代码：
三、全部代码：
感谢：@有鱼是只猫提供的视频
一、主要功能介绍：
1、用原生JS实现全选：用for循环遍历每一个input，让他全部选中
2、用原生JS实现全不选：用for循环遍历每一个input，让他全部选中
3、用原生JS实现反选：用for循环遍历每一个input，让他现在的选中状态的相反值，赋值给他的选中状态（重点）
二、JS代码详细步骤解析：
这不是重点，重点是学习原生JS
JS代码：
主要重点：
1、用原生JS实现全选：用for循环遍历每一个input，让他全部选中
2、用原生JS实现全不选：用for循环遍历每一个input，让他全部选中
3、用原生JS实现反选：用for循环遍历每一个input，让他现在的选中状态的相反值，赋值给他的选中状态（重点）
注释都很详细了，有任何问题欢迎评论指正！
<script>var inputs = document.querySelectorAll("ul li input");var buttons = document.querySelectorAll("button");// 全选buttons[0].onclick = function() {// for循环，将所有的li都选中for (let i = 0; i < inputs.length; i++) {inputs[i].checked = true;}}// 全不选buttons[1].onclick = function() {// for循环，将所有的li都选中for (let i = 0; i < inputs.length; i++) {inputs[i].checked = false;}};// 反选buttons[2].onclick = function() {// for循环，将所有的li都选中for (let i = 0; i < inputs.length; i++) {// 将当前的checked的选中状态的取反，赋值给每个input的checked属性inputs[i].checked = !inputs[i].checked;}};</script>
三、全部代码：
html和css:
<style>.main {margin: 0 auto;width: 300px;height: 400px;font-size: 20px;}input {margin-top: 10px;margin-bottom: 20px;margin-right: 20px;width: 20px;height: 16px;}li {list-style: none;}button {width: 90px;height: 40px;}</style></head><body><div class="main"><ul><li><input type="checkbox" name="" id="">尼古拉斯赵四</li><li><input type="checkbox" name="" id="">莱昂奈朵刘能</li><li><input type="checkbox" name="" id="">约翰尼宋小宝</li><li><input type="checkbox" name="" id="">布拉德小沈阳</li></ul><button>全选</button><button>全不选</button><button>反选</button></div>
