check_box复选框单击事件无法让新添加的表行的复选框跟着变化？

最新推荐文章于 2022-08-16 22:29:33 发布

ILFLE

最新推荐文章于 2022-08-16 22:29:33 发布

阅读量267

点赞数

分类专栏： JS中遇到的问题文章标签： javascript html

本文链接：https://blog.csdn.net/ILFLE/article/details/108478705

版权

JS中遇到的问题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

check_box复选框单击事件无法让新添加的表行的复选框跟着变化？

写了一个html页面，想要实现点击左上角复选框后所有复选框跟着打勾，再点击所有复选框跟着取消打勾；

在script标签内，利用document.getElementById获取了左上角checkbox复选框的对象，并调用了onClick = function(){方法体}，方法体获取了所有的checkbox对象，对象.checked=this.checked;
在这里插入图片描述

结果打开浏览器，只要一添加表行，点击左上角checkbox复选框就会不起作用：在这里插入图片描述

随后我把方法注释掉，将点击事件onclick定义在checkbox复选框所在的input标签才解决问题

在这里插入图片描述

成功了！就是内部一些原理还是搞不懂，请大家不吝赐教！

以下是源码可以看下，如果能指导一下就更好了！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息表</title>
<!--    需求：制作一个学生信息表,可以添加删除学生数据，可以提交选中数据。-->
    <style>
        table{
            border: 1px solid black;
            width: 600px;
            text-align: center;
            margin-left: 30%;
        }
        th,td{
            border: 1px solid black;
        }

        #div_1{
            margin-left: 20%;
            margin-bottom: 30px;
        }
        #div_2{
            margin-left: 30%;
            margin-top: 30px;
        }
        #btn_add{
            border: 0px;
            width: 70px;
            height: 30px;
            background-color:pink;
        }
        #btn_sub{
            border: 0px;
            width: 90px;
            height: 35px;
            margin-left: 40px;
            background-color:gold;
        }
    </style>
</head>
<body>
    <div id="div_1">
        <input type="text" id="text_id" placeholder="请输入学生编号">
        <input type="text" id="text_name" placeholder="请输入学生姓名">
        <input type="radio" name="gender" id="male" value="mela">男
        <input type="radio" name="gender" id="female" value="femela">女
        <input type="text" id="text_score" placeholder="请输入学生成绩">
        <input type="button" id="btn_add" value="添加">
    </div>

    <form action="#" method="get">
        <table id="table">
            <caption>学生成绩表</caption>
            <tr>
                <td><input type="checkbox" name="cb" id="cb_first" onclick="selectAllCB(this);"></td>
                <th>编号</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>20</td>
                <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="cb" ></td>
                <td>2</td>
                <td>王大锤</td>
                <td>男</td>
                <td>22</td>
                <td><a href="javascript:void(0);"οnclick="delTr(this);">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="cb" ></td>
                <td>3</td>
                <td>派大星</td>
                <td>男</td>
                <td>5</td>
                <td><a href="javascript:void(0);"οnclick="delTr(this);">删除</a></td>
            </tr>
        </table>

        <div id="div_2">
            <input type="button" id="btn_selectAll" value="全选">
            <input type="button" id="btn_noSelect" value="全不选">
            <input type="button" id="btn_rev" value="反选">
            <input type="submit" id="btn_sub" value="提交表单">
        </div>
    </form>
    <script>
        /*
        想要实现的功能：
        * 1.添加功能
        * 2.删除功能
        * 3.全选功能
        * 3.1点击左上角复选框实现全选或全不选
        * 
        * 4.全不选功能
        * 5.反选功能
        * 6.鼠标移动变色功能
        * 7.定义方法表单校检（编号不能为空重复、成绩不能为空）
        * 8.提交表单功能（校验成功才能提交）
        * */

        //1.添加功能

            document.getElementById("btn_add").onclick = function () {
                var id = document.getElementById("text_id").value;
                var name = document.getElementById("text_name").value;
                var gender = document.getElementsByName("gender").value;
                var score = document.getElementById("text_score").value;

                var table = document.getElementById("table");
                table.innerHTML += "<tr>\n" +
                    "                <td><input type=\"checkbox\" name=\"cb\" ></td>\n" +
                    "                <td>" + id + "</td>\n" +
                    "                <td>" + name + "</td>\n" +
                    "                <td>" + gender + "</td>\n" +
                    "                <td>" + score + "</td>\n" +
                    "                <td><a href=\"javascript:void(0);\"οnclick=\"delTr(this);\">删除</a></td>\n" +
                    "            </tr>";
            }

            //2.删除功能
            function delTr(object) {
                var table = object.parentNode.parentNode.parentNode;
                var tr = object.parentNode.parentNode;
                table.removeChild(tr);
            }

            //3.全选功能
            document.getElementById("btn_selectAll").onclick = function () {
                var cbs = document.getElementsByName("cb");
                for (var i = 0; i < cbs.length; i++) {
                    cbs[i].checked = true;
                }
            }
            //3.1单击复选框，其他复选框会跟着变
           function selectAllCB(obj){
               var cbs = document.getElementsByName("cb");
               for (var i = 0; i < cbs.length; i++) {
                   cbs[i].checked = obj.checked;
               }
           }


            //4.全不选功能
            document.getElementById("btn_noSelect").onclick = function () {
                var cbs = document.getElementsByName("cb");
                for (var i = 0; i < cbs.length; i++) {
                    cbs[i].checked = false;
                }
            }

            //5.反选功能
            document.getElementById("btn_rev").onclick = function () {
                var cbs = document.getElementsByName("cb");
                for (var i = 0; i < cbs.length; i++) {
                    cbs[i].checked = !cbs[i].checked;
                }
            }

    </script>
</body>
</html>

ILFLE

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
check_box复选框单击事件无法让新添加的表行的复选框跟着变化？

check_box复选框单击事件无法让新添加的表行的复选框跟着变化？写了一个html页面，想要实现点击左上角复选框后所有复选框跟着打勾，再点击所有复选框跟着取消打勾；在script标签内，利用document.getElementById获取了左上角checkbox复选框的对象，并调用了onClick = function(){方法体}，方法体获取了所有的checkbox对象，对象.checked=this.checked;结果打开浏览器，只要一添加表行，点击左上角checkbox复选框就会不起作用
复制链接

扫一扫