JS练习：表格全选与全不选

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>全选与全不选</title>
    <script>
        function checkAll() {
            //获得当前第一个checkbox的状态
            var check_1 = document.getElementById("check_1");
            //得到当前checked状态
            var checked = check_1.checked;
            //获得所有分类项的checkbox
            var checks = document.getElementsByName("checkone");
            for (var i = 0; i < checks.length; i++) {
                //修改每一个checkbox的状态
                var checkone = checks[i];
                checkone.checked = checked;
            }
        }
    </script>
</head>
<body onload="init()">
<table border="1px" id="tab">
    <thead>
    <tr>
        <th>
            <input type="checkbox" onclick="checkAll()" id="check_1"/>
        </th>
        <th>全选与全不选</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            <input type="checkbox" name="checkone"/>
        </td>

    </tr>
    <tr>
        <td>
            <input type="checkbox" name="checkone"/>
        </td>

    </tr>
    <tr>
        <td>
            <input type="checkbox" name="checkone"/>
        </td>

    </tr>
    </tbody>
</table>
</body>
</html>
View Code

 

posted @ 2018-10-18 16:28  就俗人一个  阅读(719)  评论(0)  编辑  收藏  举报