Bootstrap

前端基础知识——table表格 (全选)(十一)

在这里插入图片描述

<!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>
;