前端基础知识——table表格（全选）（十一）

~小先生~

已于 2023-06-15 11:35:06 修改

阅读量203

点赞数

分类专栏：前端 Html 文章标签：前端 javascript 开发语言

于 2023-06-15 11:32:30 首次发布

本文链接：https://blog.csdn.net/weixin_45496521/article/details/131224574

版权

前端同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

Html

16 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
    <head >
        <meta charset="utf-8" />
        <title></title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
       
    </head>
    <body>
        <table>
            <tr>
                <th><input type="checkbox"  id="checkall"></th>
                <th>用户名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            <tr>
                <th><input type="checkbox"  class="checkItem"></th>
                <th>张胜男</th>
                <th>男</th>
                <th>30</th>
            </tr>
            <tr>
                <th><input type="checkbox"  class="checkItem"></th>
                <th>张胜男</th>
                <th>男</th>
                <th>30</th>
            </tr>
            <tr>
                <th><input type="checkbox"  class="checkItem"></th>
                <th>张胜男</th>
                <th>男</th>
                <th>30</th>
            </tr>
            <tr>
                <th><input type="checkbox"  class="checkItem"></th>
                <th>张胜男</th>
                <th>男</th>
                <th>30</th>
            </tr>
            <tr>
                <th><input type="checkbox"  class="checkItem"></th>
                <th>张胜男</th>
                <th>男</th>
                <th>30</th>
            </tr>
            <tr>
                <th><input type="checkbox"  class="checkItem"></th>
                <th>张胜男</th>
                <th>男</th>
                <th>30</th>
            </tr>
        </table>
        <script>
            let checkall =document.getElementById("checkall");
            checkall.addEventListener("click",function(e){
            let chkItems=document.querySelectorAll(".checkItem");
            chkItems.forEach((item)=>{
                item.checked=this.checked;

            });
            });
        </script>
    </body>
</html>