js按钮复选框选择 小Demo

浮夸小生。
2022-02-06 / 0 评论 / 83 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2022年02月06日,已超过298天没有更新,若内容或图片失效,请留言反馈。

全选,全部选,反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按钮选择器</title>
    <style>
        table {
            margin-top: 200px;
            text-align: center;
        }
        tr,
        th {
            height: 50px;
        }
        div {
            margin-top: 50px;
            margin-left: 40%;
        }
    </style>
</head>
<body>
    <table border="1px" width="500px" cellspacing="0" align="center">
        <caption><h2>学生表</h2></caption>
        <tr>
            <th><input type="checkbox" name="cb" id="fist_select"></th>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="cb"></td>
            <td>1</td>
            <td>孔子</td>
            <td>男</td>
            <td>删除</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cb"></td>
            <td>1</td>
            <td>孔子</td>
            <td>男</td>
            <td>删除</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cb"></td>
            <td>1</td>
            <td>孔子</td>
            <td>男</td>
            <td>删除</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cb"></td>
            <td>1</td>
            <td>孔子</td>
            <td>男</td>
            <td>删除</td>
        </tr>

    </table>
    <div>
        <input type="button" id="selectall" value="全选">
        <input type="button" id="noselectall" value="全不选">
        <input type="button" id="unSelect" value="反选">
    </div>

    <script>
        //浏览器对象加载完毕
        window.onload= function() {
            //按钮点击事件
            document.getElementById("selectall").onclick = function() {
                //获取所有的复选框按钮
                var cbs = document.getElementsByName('cb');
                //遍历数组
                for (var i = 0; i < cbs.length; i++) {
                    //checked 属性设置或返回 checkbox 是否应被选中。
                    //checkboxObject.checked=true|false
                    //调用checked() 方法
                    cbs[i].checked = true;
                }
            }
            document.getElementById("noselectall").onclick = function() {
                var cbs = document.getElementsByName('cb');
                for (var i = 0; i < cbs.length; i++) {
                    cbs[i].checked = false;
                }
            }
            document.getElementById("unSelect").onclick = function() {
                var cbs = document.getElementsByName('cb');
                for (var i = 0; i < cbs.length; i++) {
                    cbs[i].checked = !cbs[i].checked;
                }
            }
            document.getElementById("fist_select").onclick = function() {

                var cbs = document.getElementsByName('cb');
                for (var i = 0; i < cbs.length; i++) {
                    cbs[i].checked = this.checked;
                }
            }
        }
    </script>
</body>
</html>

预览地址:https://bltang.cc/demo/buttonCheckbox.html

0

评论 (0)

取消