Using jQuery to get multiple checkbox's value and Multiple Delete Using jquery json

Question

I have already bind a html table using jQuery json. I want to get multiple checkbox value using jQuery json and delete by selected multiple delete method. This is my code for bind the table.

     $(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");
             }
         });

     });

This is my Button to Delete selected(multiple delete):

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

This is my html table:

    <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>

You just tell me :

1.what is the code to select all the checkbox??

2.Code to delete using multiple jquery??

The Server side Code is here For Single Delete(with out checkbox):

[WebMethod]
    public static void deleteRecord(int Id)
    {

        clsCategoryBL objproject = new clsCategoryBL();

        objproject.CategoryDelete(Id);

    }

In BL:

  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";
        }
    }

The Delete is Occur on the Client Side by Using This code:

$().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();
                 }

             });
         });
     });

The Code For Bind The Table:

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; }
    }

I want To delete it on server Side that means also on my database(Sql) So what should i do???

I Want To Delete Multiple Row By Click On Multiple CheckBox On Database Also..I have mention in above the backend code also..I want to delete the row of html table by click 2 to 3 checkbox(it may be vary depend upon the data) and click Delete Selected button.. The Table structure after pressing 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>

First of all i want get the multiple checkbox value and i want to delete the multiple row by select the checkbox,when click on Delete multiple... — Manoj Maharana
– Manoj Maharana, Commented Jul 11, 2016 at 6:30
Fetching all checkbox can be done by $("input[type='checkbox']"). I still didn't understand what you want to delete — Roysh
– Roysh, Commented Jul 11, 2016 at 6:31

Terrance00 · Accepted Answer · 2016-07-11 09:43:15Z

2

Assuming there is only one checkbox in a row, you could simply iterate through the rows and post to your existing [WebMethod]

Using the second column as the ID (EDIT):

$().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();
            }
        });

    });
});

Explanation

Using JQuery you simply iterate through each row and look for the checkbox value. Note you will iterate through the header as well, so if there is a checkbox there you must add logic to skip the first iteration.

EDIT 3: You will also post the ID to the server if the checkbox is checked. Important to note that you would rather post a single bulk array of ID's instead of multiple single posts, but that method has not been exposed or posted here.

Good Luck

CODE SNIPPET (CLIENT SIDE ONLY)

$().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>

edited Jul 11, 2016 at 9:43

answered Jul 11, 2016 at 6:48

Terrance00

1,6981 gold badge21 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

21 Comments

Manoj Maharana Over a year ago

The code is not working Sir...Is there any other way...Can you write down code???

Terrance00 Over a year ago

Will make snippet, stand by.

Terrance00 Over a year ago

Open the developer tools "F12" in your browser and check for relevant errors? Then post them in your question. We've got a bit of language barrier, did I not answer the right question?

Manoj Maharana Over a year ago

The code is working on the client side but server side the code is not working....

Terrance00 Over a year ago

Did not know that was a requirement, Could you elaborate on what you are using at the back end? You will have to post an ID array to the back end. Or you will have to bind the datatable differently.

|

Deepak Singh · Accepted Answer · 2016-07-11 06:45:36Z

0

A easier method will be if you give a class to all the check-boxes in your form and then on button click you simply iterate through all the check-boxes using the class, and therby seralizing their values.

var values = $("#Myform").find(".CheckBoxClass").serialize();

here the variable value will contain the values of all the checkboxes in your form and you can send them using ajax on your server to perform further action.

answered Jul 11, 2016 at 6:45

Deepak Singh

6501 gold badge9 silver badges26 bronze badges

1 Comment

Manoj Maharana Over a year ago

You just write down the code clearly...So that i can understand...I have mention everything(html table,jquery script code...),So you just tell me what should i write down in my script and what is the code to select multiple checkbox(how to get value) and what is the code to delete by click on Delete Selected button???

Community · Accepted Answer · 2017-05-23 12:13:58Z

0

You can use something like below mentioned.

$("example1 input:checkbox").prop('checked',this.checked);

Or it is answered already in below post

jquery set all checkbox checked

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered Jul 11, 2016 at 7:01

Techies Palace

161 bronze badge

Collectives™ on Stack Overflow

Using jQuery to get multiple checkbox's value and Multiple Delete Using jquery json

3 Answers 3

21 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

21 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related