5 全选、 全不选、 反选

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

---

---

提示：以下是本篇文章正文内容，下面案例可供参考

一.html

 <table>
        <thead>
            <tr>
                <th>
                    序号
                </th>
                <th>商品名称</th>
                <th>商品价格</th>
            </tr>
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" class="check"> 
                    </td>
                    <td>
                        javascript 3
                    </td>
                    <td>60</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" class="check"> 
                    </td>
                    <td>
                        js权威指南
                    </td>
                    <td>80</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" class="check"> 
                    </td>
                    <td>
                        nodejs
                    </td>
                    <td>50</td>
                </tr>
            </tbody>
        </thead>
    </table>
    <div>
        <input type="checkbox"  id="checkall"> 全选
    </div> 

二JS

---

   <script>
        // 1获取
        var checkAll =document.querySelector('#checkall')
        // 注意：此处获得checks以数组形式展开
        var checks=document.querySelectorAll('.check')
        console.log(checks);

        // 2全选/全不选(全选按钮与其他按钮状态相同)
        checkAll.onclick=function(){
            checks.forEach(function(item){
                item.checked=checkAll.checked
            })
        }
        // 3反选
        // 4遍历选择框
        checks.forEach(function(item){
            // 5由于遍历，相当于为所有选项框添加事件
            item.onclick =function(){
                //6设置点击选项框个数
                var count=0
                //7遍历选择框，若有选中择加1
                  checks.forEach(function(t){
                        if(t.checked==true){
                            count++
                        }
                  })
                  console.log(count);
                //   8针对三个选择框取消一个选中，全选未被撤销选中的情况
                  if(count==checks.length){
                    checkAll.checked=true
                  }else{
                    checkAll.checked=false
                  }
            }
        })






    </script>

效果：

https://live.csdn.net/v/242871