使用 jQuery 获取多个复选框的值，并使用 jquery json 获取多个删除

本文关键字：获取 jquery json 删除 jQuery 复选框 使用 | 更新日期: 2023-09-27 17:56:11

我已经使用 jQuery json 绑定了一个 html 表。我想使用 jQuery json 获取多个复选框值并通过选定的多个删除方法删除。这是我绑定表的代码。

     $(function () {
   debugger
         $.ajax({
     type: "POST",
             contentType: "application/json; charset=utf-8",
             url: "WebForm5.aspx/BindDatatable",
             data: "{}",
             dataType: "json",
             success: function (dt) {
                 debugger;
                 for (var i = 0; i < dt.d.length; i++) {
                     $("#example1 > tbody").append("<tr><td> <input type='checkbox' /></td><td>" + dt.d[i].CategoryID + "</td><td>" + dt.d[i].Name + "</td><td>" + dt.d[i].Status + "</td><td> <button type='submit'>Submit</button><button type='submit'  onclick='deleteRecord(" + dt.d[i].CategoryID + ")'>Delete</button> </tr>");
                 }
                 $("#example1").DataTable();
             },
             error: function (result) {
                 alert("Error");
             }
         });
     });

这是我的按钮删除选定（多次删除）：

<button type="button" name="deletebtn" id="deletebtn">Delete Selected</button>

这是我的 html 表：

    <div class="box-body">
                <button type="button" name="deletebtn" id="deletebtn">Delete Selected</button>
              <table id="example1" class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <th>Check Box</th>
                    <th>Category Name</th>
                    <th>Category Details</th>
                      <th>Status</th>
                      <th>Action</th>
                  </tr>
                </thead>

                  <tbody id="myBody">

                  </tbody>
              </table>
            </div>

你只要告诉我：

1.选择所有复选框的代码是什么？

2.使用多个jquery删除的代码？？

服务器端代码在这里 对于单个删除（不带 out 复选框）：

[WebMethod]
    public static void deleteRecord(int Id)
    {
        clsCategoryBL objproject = new clsCategoryBL();
        objproject.CategoryDelete(Id);
    }

在提单中：

  public string CategoryDelete(int CategoryID)
    {
        using (KSoftEntities db = new KSoftEntities())
        {
            try
            {
                var categoryDetails = db.tblCategories.Where(i => i.CategoryID == CategoryID).SingleOrDefault();
                db.tblCategories.Remove(categoryDetails);
                db.SaveChanges();
                return "Record deleted successfully";
            }
            catch (Exception ex)
            {
            }
            return "Error on deletion";
        }
    }

使用以下代码在客户端进行删除：

$().ready(function () {
         $('body').on('click', '#deletebtn', function () {
             debugger;
             $("#example1 tr").each(function () {
                 var rowSelector = $(this);
                 if (rowSelector.find("input[type='checkbox']").prop('checked')) {
                     rowSelector.remove();
                 }
             });
         });
     });

绑定表的代码：

enter code here
protected void Page_Load(object sender, EventArgs e)
    {
        if (Session["adminuser"] == null)
            Response.Redirect("Default.aspx");
        if (!IsPostBack)
        {
            // Page.Title = "Category Details";
            BindDatatable();
        }
    }
    [WebMethod]
    public static UserDetails[] BindDatatable()
    {
        clsCategoryBL objcategory = new clsCategoryBL();
        List<UserDetails> details = new List<UserDetails>();
        DataTable dt = new DataTable();
        //var categories= clsCategoryBL.GetAllCategoryDetails("admin");
        dt = objcategory.GetAllCategoryDetails("admin");
        if (dt.Rows.Count > 0)
        {
            foreach (DataRow dtrow in dt.Rows)
            {
                UserDetails user = new UserDetails();
                user.CategoryID = dtrow["CategoryID"].ToString();
                user.Name = dtrow["Name"].ToString();
                user.Status = dtrow["Status"].ToString();
                details.Add(user);
            }
            //literal1.Text = html.ToString();
        }
        return details.ToArray();
    }

 public class UserDetails
    {
        public string CategoryID { get; set; }
        public string Name { get; set; }
        public string Status { get; set; }
    }

我想在服务器端删除它，这意味着也在我的数据库（Sql）上那我该怎么办???

我还想通过单击数据库上的多个复选框来删除多行。.我在上面的后端代码中也提到了。.我想通过单击2到3复选框删除html表的行（可能因数据而异），然后单击"删除所选"按钮。按 f12 后的表结构：

enter code here
<table id="example1" class="table table-bordered table-striped dataTable no-footer" role="grid" aria-describedby="example1_info">
                <thead>
                  <tr role="row"><th class="sorting_asc" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Check Box: activate to sort column descending" style="width: 204px;">Check Box</th><th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Category Name: activate to sort column ascending" style="width: 276px;">Category Name</th><th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Category Details: activate to sort column ascending" style="width: 293px;">Category Details</th><th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Status: activate to sort column ascending" style="width: 148px;">Status</th><th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Action: activate to sort column ascending" style="width: 211px;">Action</th></tr>
                </thead>

                  <tbody id="myBody">

                  <tr role="row" class="odd"><td class="sorting_1"> <input type="checkbox"></td><td>42</td><td>xyz</td><td>True</td><td> <button type="submit">Submit</button><button type="submit" onclick="deleteRecord(42)">Delete</button> </td></tr><tr role="row" class="even"><td class="sorting_1"> <input type="checkbox"></td><td>33</td><td>Advertising</td><td>True</td><td> <button type="submit">Submit</button><button type="submit" onclick="deleteRecord(33)">Delete</button> </td></tr><tr role="row" class="odd"><td class="sorting_1"> <input type="checkbox"></td><td>31</td><td>Travel &amp; Hospitality</td><td>True</td><td> <button type="submit">Submit</button><button type="submit" onclick="deleteRecord(31)">Delete</button> </td></tr></tbody>
              </table>

使用 jQuery 获取多个复选框的值，并使用 jquery json 获取多个删除

假设一行中只有一个复选框，您可以简单地遍历这些行并发布到现有的 [WebMethod]

使用第二列作为 ID （编辑）：

$().ready(function () {
    $('body').on('click', '#deletebtn', function () {
        $("#example1 tr").each(function () {
            var rowSelector = $(this);
            if (rowSelector.find("input[type='checkbox']").prop('checked'))
            {
                //THE MARKUP SHOWING THE ID IS NOT AVAILABLE
                //POST A TABLE ENTRY TO CLEAR UP
                var id = rowSelector.find('td').first().next().html();
                var sendObj = {Id : id};
                //USE JSON OBJECT
                $.ajax({
                    url : "/page.aspx/deleteRecord",//CHANGE TO YOUR URL
                    dataType: "json",
                    data: sendObj,
                    type: "POST",
                    success: function () {
                        alert("entry deleted");
                    }
                });
                rowSelector.remove();
            }
        });
    });
});

解释

使用 JQuery，您只需遍历每一行并查找复选框值。请注意，您还将循环访问标头，因此如果那里有一个复选框，则必须添加逻辑以跳过第一次迭代。

编辑 3：如果选中该复选框，您还将 ID 发布到服务器。重要的是要注意，您宁愿发布单个批量 ID 数组而不是多个单个帖子，但该方法尚未在此处公开或发布。

祝你好运

代码片段（仅限客户端）

$().ready(function () {
    $('body').on('click', '#deletebtn', function () {
            $("#example1 tr").each(function () {
                var rowSelector = $(this);
                if (rowSelector.find("input[type='checkbox']").prop('checked'))
                {
                    rowSelector.remove();
                }
            });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button id='deletebtn'>DELETE</button>
  
  <table id='example1'>
    <thead>
    <tr>
      <th>CHECKBOX</th>
      <th>NAME</th>
      <th>DESCRIPTION</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td><input type='checkbox' value='check' /></td>
      <td>the name</td>
      <td>the description</td>
    </tr>
    <tr>
      <td><input type='checkbox' value='check' /></td>
      <td>the name</td>
      <td>the description</td>
    </tr>
    <tr>
      <td><input type='checkbox' value='check' /></td>
      <td>the name</td>
      <td>the description</td>
    </tr>
    </tbody>
  </table>
</div>

一个更简单的方法是，如果您为表单中的所有复选框提供一个类，然后在单击按钮时，您只需使用该类遍历所有复选框，然后将它们的值锯齿化。



var values = $("#Myform").find(".CheckBoxClass").serialize();在这里，变量value将包含表单中所有复选框的值，您可以使用服务器上的 AJAX 发送它们以执行进一步的操作。

您可以使用下面提到的内容。

$（"example1 input：checkbox"）.prop（'checked'，this.checked）;

或者已经在下面的帖子中回答了

选中"j查询设置全部"复选框

相关文章：