Jquery多选框批量删除

寻找优秀的自己

已于 2023-03-20 19:55:56 修改

阅读量417

点赞数

CC 4.0 BY-SA版权

文章标签： jquery javascript html5

于 2023-03-20 19:51:08 首次发布

本文链接：https://blog.csdn.net/qq_52160611/article/details/129674583

此代码示例展示了如何利用jQuery动态添加表格行，实现全选和反选功能，以及删除选中行的操作。用户输入姓名、邮箱和地址后，点击添加按钮可将信息插入表格。同时提供了全选复选框，当点击全选时，所有行会被选中；点击删除选中按钮，则移除被选中的表格行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

需要网络环境，或者将插件库迁移到本地

代码



<!DOCTYPE html>
<html lang="en">
<!--
@author XueZhimin
-->
<head>
    <meta charset="UTF-8">
    <title>选择框</title>

<!--    本地-->
<!--    <script type="application/javascript" src="../lib/jquery.min.js"></script>-->

<!--    CDN-->
    <script type="application/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

    <script type="application/javascript">
        $(function () {

            $tableList = $("#tableList");
            /**
             * 添加用户
             */
            $("#addUser").click(function () {
                //获取数据
                name = $("#name").val();
                email = $("#email").val();
                address = $("#address").val();

                //创建节点
                $a = $("<input type='checkbox'>");
                $td0 = $("<td></td>");
                $td0.append($a);
                "<td>" + email + "</td>"
                $td1 = $("<td>" + name + "</td>");
                $td2 = $("<td>" + email + "</td>");
                $td3 = $("<td>" + address + "</td>");

                $tr = $("<tr></tr>");

                //追加
                $tr.append($td0);
                $tr.append($td1);
                $tr.append($td2);
                $tr.append($td3);

                $tableList.append($tr);
            });
            /**
             *全选事件
             */

            $("#selectAll").change(function () {
                $flag = $("#selectAll").prop("checked");

                if ($flag) {
                    //选择所有
                    $("#tableList :checkbox").prop("checked", true);

                } else {
                    $("#tableList :checkbox").prop("checked", false);
                }

            });

            /**
             * 删除所有
             */

            $("#delSelected").click(function () {

                //获取table中被选中的tr

                //从table删除这个tr
                var find = $("#tableList :checkbox")
                $.each(find, function (index, obj) {
                    if (obj.checked) {
                        $parentDel = $(obj.parentNode);//input > td
                        //判断是否为td

                        var flag = $parentDel.is("td");

                        // alert(flag);
                        if (flag) {
                            $parentDel.parent().remove();
                        }
                    }

                });

            });


        })


    </script>
</head>
<body>

姓名:<input type="text" id="name">
邮箱:<input type="email" id="email">
地址:<input type="text" id="address">
<input type="button" value="添加" id="addUser">

<table id="tableList" width="100%" border="1">

    <tr>
        <th width="100px"><input id="selectAll" type="checkbox">全选</th>
        <th>姓名</th>
        <th>邮箱</th>
        <th>地址</th>
    </tr>

    <tr>
        <td><input type="checkbox"></td>
        <td>XueZhiMin</td>
        <td>XXX@qq.com</td>
        <td>山东</td>
    </tr>
</table>

<br>
<hr>
<br>

<input type="button" id="delSelected" value="删除选中">


</body>
</html>