JavaScript自动勾全选和取消全选

开发工具与关键技术： vscode /javascript 

撰写时间：2022/8/21

撰写人：阿珍敲code

        案例介绍

               在查看列表数据时，当我们想选中一条数据的时候，勾选一下就选中一条数据，如果说列表的数据有很多条很多页，那对用户也太不友好了，所以全选在多条数据中经常见到，写代码的时候要注意哪些问题呢。一起来看看吧！

---

        html代码

                用表格把数据和按钮列出来

 <!-- 数据写在表格里面，看起来更加清晰 -->
    <table border="1" cellspacing="0">
        <!-- 表格的第一行 表头 -->
        <thead>
            <td>
                <input type="checkbox" name="" id="btn_h">全选
            </td>
            <td>姓名</td>
            <td>学号</td>
            <td>成绩</td>
        </thead>
        <!-- 数据项开始 -->
        <tr>
            <td>
                <input type="checkbox" name="dx">
            </td>
            <td>阿珍1</td>
            <td>s001</td>
            <td>95</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="dx">
            </td>
            <td>阿珍2</td>
            <td>s002</td>
            <td>87</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="dx">
            </td>
            <td>阿珍3</td>
            <td>s003</td>
            <td>89</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="dx">
            </td>
            <td>阿珍4</td>
            <td>s004</td>
            <td>79</td>
        </tr>
        <!-- 数据项结束 -->
    </table>
    <!-- 表格结束 -->

       css代码

        table {
            /* 表格中的文字居中对齐 */
            text-align: center;
        }
        thead{
            /* 表格标题字体加粗 */
            font-weight: bold;
        }
        thead td:nth-child(1){
            font-size: 12px;
        }
        /* 单元格的宽高 */
        td {
            width: 80px;
            height: 38px;
        }

       JavaScript代码

                步骤：

                        1.获取到表头的多选按钮元素和数据项的多选按钮元素

                        2.触发多选单击事件，点击后通过改变数据项按钮的checked属性实现全选功能

                        3.再解决所有的数据项按钮checked属性值都为true的时候表头的多选按钮自己勾选

       

//获取表头中的全选按钮
    var btn_h =document.querySelector('#btn_h');
    // console.log(btn_h);
    // 获取数据项的所有多选按钮   
    // querySelector('tbody').querySelectorAll('input')是获取标签为tbody下的多有多选框按钮  获取父级元素后再获取到子级元素并赋值给trs
    var trs = document.querySelector('tbody').querySelectorAll('input');
    // console.log(trs);
    // 单击多选按钮时触发事件
    btn_h.onclick = function () {
        // 遍历tbody中的每个多选框并把checked(默认选中属性)赋值为true
        for (var i = 0; i < trs.length; i++) {
            // this.checked代表点击之后btn_h的默认值为true或false。
            trs[i].checked = this.checked;
        }
    }
    //解决tboby数据项的按钮都勾选上时thead的多选按自动勾选 
    for (var i = 0; i < trs.length; i++) {
        // 单击某个数据项的按钮时触发事件
        trs[i].onclick = function () {
            var count = 0;//计数器count
            // 遍历trs检查勾选了几个多选框按钮
            for (var j = 0; j < trs.length; j++) {
                // 如果某条数据被勾选了，计数器加1
                if (trs[j].checked) {
                    count++;
                }
            }
            // 判断计数器是否等于trs的长度
            if (count == trs.length) {
                // 等于时改变thead全选的checked状态
                btn_h.checked = true;
            }else{
                btn_h.checked = false;
            }
        }
    }

        运行结果

        

 

总结：以上就是我的分享，新手上道，请多多指教。持续更新哦！