使用JS完成全选和选不选操作

最新推荐文章于 2023-02-10 17:25:55 发布

qq_41485882

最新推荐文章于 2023-02-10 17:25:55 发布

阅读量238

点赞数

使用JS完成全选和选不选操作
确定事件(鼠标单击事件onclick)，事件绑定到编号前面的复选框里面

获取编号前面的复选框的状态(是否选中)
获取复选框：var checkAllEle = document.getElementById(“id”)
获取复选框的状态：checkAllEle.checked?

获取下面所有的复选框：
document.getElementsByName(“name”);

步骤分析
第一步：确定事件(onclick)并为其绑定一个函数
第二步：书写函数(获取编号前面的复选框，获取其状态)
第三步：判断编号前面复选框的状态(如果为选中，获取下面所有的复选框，并将其状态置为选中)
第四步：判断编号前面复选框的状态(如果为未选中，获取下面所有的复选框，并将其状态置为未选中)
代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用js实现全选和全部选</title>
    <link rel="stylesheet" href="">
    <script type="text/javascript">
        //1.确定事件：onclick;
        function check(){
            //2.获得复选框的id
           var check = document.getElementById('check1');
           //3.获得check1下面的name
           var checknames = document.getElementsByName('checkname');
           //4.判断check1有没有勾选
           if(check.checked==true){
            //5.遍历checknames数组
                for (var i = 0;i<checknames.length; i++) {
                        checknames[i].checked = true;
                }
           }
           //6.判断check1有没有勾选
           if(check.checked==false){
            //7.遍历checknames数组
                for (var i = 0;i<checknames.length; i++) {
                        checknames[i].checked = false;
                }
           }

        }

    </script>
</head>
<body>
   <table border="1" width="500" height="50" align="center" >
            <thead>
                <tr>
                    <td colspan="4">
                        <input type="button" value="添加" />
                        <input type="button" value="删除" />
                    </td>
                </tr>
                <tr>
                    <th><input type="checkbox" onclick="check()" id="check1" /></th>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr >
                    <td><input type="checkbox" name="checkname"/></td>
                    <td>1</td>
                    <td>张三</td>
                    <td>22</td>
                </tr>
                <tr >
                    <td><input type="checkbox" name="checkname"/></td>
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
                <tr >
                    <td><input type="checkbox" name="checkname"/></td>
                    <td>3</td>
                    <td>王五</td>
                    <td>27</td>
                </tr>
                <tr >
                    <td><input type="checkbox" name="checkname"/></td>
                    <td>4</td>
                    <td>赵六</td>
                    <td>29</td>
                </tr>
                <tr >
                    <td><input type="checkbox" name="checkname"/></td>
                    <td>5</td>
                    <td>田七</td>
                    <td>30</td>
                </tr>
                <tr >
                    <td><input type="checkbox" name="checkname"/></td>
                    <td>6</td>
                    <td>汾九</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
</body>
</html>