JQuery全选并删除

原创已于 2022-12-28 20:00:53 修改 · 528 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jquery #javascript #前端

于 2022-12-28 19:58:46 首次发布

本文介绍了一种使用JQuery实现表格中数据项全选及批量删除的方法。通过简单的HTML结构配合JQuery的选择器和事件处理，实现了前端的全选功能，并通过Ajax向后端发送所选项目的ID进行批量删除操作。

JQuery全选并删除

先看一下效果

在这里插入图片描述

html代码：

        <table class="table table-bordered">
            <thead>
            <tr>
                <th><input type="checkbox" id="checkall">编号</th>
                <th>Name</th>
                <th>注释</th>
            </tr>
            </thead>
            <tbody>
            {% for field in queryset %}  # 循环表的行 （后端是python-Django）
                <tr>
                    <th scope="row"><input type="checkbox" value="{{ field.id }}"  id="checkone">{{ field.id }}</th>
                    <td>{{ field.mname }}</td>
                    <td>{{ field.cjdate|datestamp }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>

JS全选代码

//点击编号前的复选框_全选/取消全选
$("#checkall").click(function () {
     let checkAll = $("input[id = 'checkall']");
     let checkOne = $("input[id = 'checkone']");
     for (let i = 0; i < checkOne.length; i++) {
         checkOne[i].checked = checkAll[0].checked;
     }
 })

 $(".Get-Value").click(function () {
        let GetValuelist = [];
        let GetAll = $("input[id = 'checkone']");
        for (let i = 0; i < GetAll.length; i++) {
            if (GetAll[i].checked === true) {
                GetValuelist[i] = $(GetAll[i]).val();
            }
        }
        //Ajax开始
        if (GetValuelist.length !== 0) {
            $.ajax({
                url: "/Delete/",
                type: "POST",
                data: {
                    value: GetValuelist
                },
                //这条必需加的，因为data传递的是数组，要用传统的方式来序列化数据，那么就设置为 true  （不设置为true会提交 'value[]':[1,2,3,4]这种形式在后台是取不到值的）
                traditional: true,
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        // 如果成功
                        alert(res.msg);
                    }
                },
                error: function () {
                    //alert("表格生成失败");
                    $('#errordate').text("表格生成失败") //在选择器里输出错误
                }
            })
        } else {
            let error_m = "请选择数据";
            $('#errordate').text(error_m)  //在选择器里输出错误
            //alert(error_m);
        }
        //Ajax结束
    })