本篇文章给大家介绍原生js是怎么实现全选和反选的功能的，希望对需要的朋友有所帮助！
思路：首先我们获取节点
遍历每个节点 获取到checked的属性 然后我们通过改变checked的属性改变选中的状态 全选的时候我们让他们都为true 反选的时候我们使用！达到效果
本次使用到的知识点有：
document.getElementsByName（‘name属性’）：选中所有的name为name属性的的元素节点对象
document.getElementById('id名称'): 通过id名称获取一个元素节点对象
onclick:鼠标点击事件
html部分：
<input> 全选 <input>足球 <input>篮球 <input>羽毛球 <input>反选
js部分
var items = document.getElementsByName('items');
var quan = document.getElementById('quan');
var fan = document.getElementById('fan');
function fan1(){
var index = 0;
for(var i =0;i<items.length quan.onclick="function(){" fan.onclick><p><img src="https://img.php.cn/upload/article/000/000/020/a37a80b3c1cd10f0bf97587d1908c868-1.png?x-oss-process=image/resize,p_40" alt="在这里插入图片描述"></p>
<p>相关推荐：【<a href="https://www.php.cn/course/list/17.html" target="_blank">JavaScript视频教程</a>】</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5980" title="javascript-pro"><img
src="https://img.php.cn/upload/skill/000/000/081/179074807567238.jpg" alt="javascript-pro" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5980" title="javascript-pro" class="overflowclass">javascript-pro</a>
<p class="overflowclass">专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发</p>
</div>
<a rel="nofollow" href="/xiazai/skill5980" title="javascript-pro" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-22a2fefd3b.css" rel="stylesheet">
<link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-4f8fbf9108.css" rel="stylesheet"></items.length>
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
