表格全选,全不选,反选,第一行选择框选中其他全选中

表格全选,全不选,反选,第一行选择框选中其他全选中

代码如下:

<table>
    <caption>学生信息表</caption>
    <tr>
        <th><input type="checkbox" id="aaa"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void (0)">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void (0)">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void (0)">删除</a></td>
    </tr>
</table>
<div>
    <button id="all" type="button">全选</button>
    <button id="not" type="button">全不选</button>
    <button id="rev" type="button">反选</button>
</div>

<script>
    document.getElementById("all").onclick = function () {
        /*通过标签名获得是一个伪数组*/
        let all = document.getElementsByTagName("input");

 　　　/*伪数组遍历*/

      for (let i of all) {   
            i.checked = true;
        }
    }

    document.getElementById("not").onclick = function () {
        /*获取所有得input标签*/
        let all = document.getElementsByTagName("input");

        for (let i of all) {
            i.checked = false;
        }
    }

    document.getElementById("rev").onclick = function () {
        /*获取所有得input标签*/
        let all = document.getElementsByTagName("input");

        for (let i of all) {
            i.checked = !i.checked;
        }
    }

    document.getElementById("aaa").onclick = function () {
        let bol = this.checked;

        /*获取所有得input标签,但排除第一个*/
        let all = document.getElementsByTagName("input");
        for (let i = 1; i < all.length; i++) {
            all[i].checked = bol;
        }
    }

    /*为tr绑定事件鼠标悬浮变成红色*/
    let tr = document.getElementsByTagName("tr");

    for (i of tr) {
        i.onmouseover = function () {
            this.setAttribute("style","background-color:red")

        }

        i.onmouseout = function () {
            this.setAttribute("style","");
        }
    }
</script>