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>

Answer 1

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> 

Answer 2

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.

Answer 3

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