javascript如何实现全选
导读：本文共3736.5字符，通常情况下阅读需要12分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： javascript实现全选的方法：1、通过HTML和CSS创建一个表单；2、用DOM方法分别获取全选和单选的“input”元素；3、设置一个变量isAllChecked；4、将isAllChecked的值赋给全选按钮。本文操作环境：Windows7... ...
目录
(为您整理了一些要点),点击可以直达。
javascript实现全选的方法：1、通过HTML和CSS创建一个表单；2、用DOM方法分别获取全选和单选的“input”元素；3、设置一个变量isAllChecked；4、将isAllChecked的值赋给全选按钮。
本文操作环境：Windows7系统、javascript1.8.5版、Dell G3电脑。
javascript 怎么实现全选？
用JS实现表单的全选与反选
这也是一个练习，就是一般电商购物车的全选，另外加了个反选（貌似有反选功能的购物车不多，倒是windows资源管理器有反选功能）
先说全选：
当4行商品都被勾选上时，“全选”自动被勾选上；当有商品没有被勾选时，“全选”自动被取消。
当4行商品商品并没有被全部勾选上时，勾选“全选”可以让4行商品全部被勾选上；
当“全选”处于被勾选状态时，取消“全选”的勾选，所有的商品都取消勾选。
梳理好需求，我们先用HTML和CSS把这个表单画出来，代码如下：
<html><head><metacharset="utf-8"><title>全选2</title><styletype="text/css">.wrap{margin-left:500px;margin-top:200px;}table{border-collapse:collapse;}th{border:1pxsolidblack;height:45px;}td{border:1pxsolidblack;text-align:center;font-weight:bold;}</style></head><body><divclass="wrap"><tablecellspacing="0"cellpadding="14"><thead><tr><th><inputtype="checkbox"id="selectAll"onclick="funcAll()"></th><th>商品</th><th>价格</th></tr></thead><tbodyid="j_tb"><tr><td><inputtype="checkbox"class="selectOne"onclick="funcOne()"></td><td>iPhoneX</td><td>8000</td></tr><tr><td><inputtype="checkbox"class="selectOne"onclick="funcOne()"></td><td>iPadpro</td><td>5000</td></tr><tr><td><inputtype="checkbox"class="selectOne"onclick="funcOne()"></td><td>iPadair</td><td>2000</td></tr><tr><td><inputtype="checkbox"class="selectOne"onclick="funcOne()"></td><td>Applewatch</td><td>2000</td></tr></tbody></table><inputtype="button"id="backwardOption"value="反选"onclick="funcBackward()"></div></body></html>这里我已经把鼠标点击事件的函数命名好了，全选叫“funcAll()”，单选叫“funcOne()”，反选叫“funcBackward()”。CSS部分主要给表单加上边框，同时交接处边框融合，基本就是最朴素的样子。
先说第2条和第3条需求，逻辑相对简单：
用DOM方法分别获取全选和单选的“input”元素，全选只有一个，直接用getElementById()就可以了（已经提前设置好id），而单选有四个，用getElementByClassName()来获取（已经提前设置好class），当然获取到的是一个数组。
讲获取到的元素都赋值给变量，然后用for循环遍历数组，将全选的这个变量的checked属性赋值给每个单选的变量的checked属性。
此时，已经同时解决2和3，代码如下：
functionfuncAll(){varselectAll=document.getElementById('selectAll');varselectOnes=document.getElementsByClassName('selectOne');for(vari=0;i<selectOnes.length;i++){//循环遍历，把全选框的值赋给每个单选框selectOnes[i].checked=selectAll.checked;}}接下来说第1条：“当4行商品都被勾选上时，“全选”自动被勾选上；当有商品没有被勾选时，“全选”自动被取消。”
在这里，“全选”的状态类似在监听其他所有按钮，一旦有变化，随之变化。所以这个逻辑要写到每行商品单选按钮的鼠标点击事件里。
我设置了一个变量isAllChecked作为桥梁，初始状态将isAllChecked定义为true，循环遍历每个单选按钮，一旦检测到有单选按钮没被勾选，就将isAllChecked置为false，跳出循环，并将isAllChecked的值赋给全选按钮。
这样一来，只要有一个单选按钮没被选中，就会将全选也变成未选中状态。，代码如下：
functionfuncOne(){varselectAll=document.getElementById('selectAll');//函数作用域，所以得再定义一遍varselectOnes=document.getElementsByClassName('selectOne');varisAllChecked=true;//定义一个变量作为桥梁来控制全选按钮for(vari=0;i<selectOnes.length;i++){if(selectOnes[i].checked===false){isAllChecked=false;break;}}selectAll.checked=isAllChecked;}再来说说反选
点击反选按钮，所有的单选按钮状态取反：选中的变成未选中，未选中的变成选中
点击反选，造成的结果，仍然能够让全选符合之前的逻辑。
第1条其实很好实现，点击反选按钮时，循环遍历4个单选按钮，将每个元素对应的checked属性取反即可。
但是，我们在前面实现的全选监听所有单项，实际上是在每个单选按钮的点击事件里实现的，也就是说，如果我们不通过点击单选按钮来改变单选按钮的状态，全选实际上是监听不到全局的。
所以，我们可以把监听这部分的代码再写到反选的鼠标点击函数里去，最后的代码如下：
varselectAll=document.getElementById('selectAll');//函数作用域，所以得再定义一遍varselectOnes=document.getElementsByClassName('selectOne');for(vari=0;i<selectOnes.length;i++){selectOnes[i].isAllChecked=!selectOnes[i].checked;}functionfuncOne(){};varisAllChecked=true;//定义一个变量作为桥梁来控制全选按钮for(vari=0;i<selectOnes.length;i++){if(selectOnes[i].checked===false){isAllChecked=false;break;}}selectAll.checked=isAllChecked;}最终的效果如下：
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">javascript如何实现全选的详细内容，希望对您有所帮助，信息来源于网络。