Manoj Maharana Manoj Maharana - 4 months ago 57
Javascript Question

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

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

Answer

Assuming there is only one checkbox in a row, you could simply iterate through the rows:

$().ready(function () {
    $('body').on('click', '#deletebtn', function () {
            $("#example1 tr").each(function () {
                var rowSelector = $(this);
                if (rowSelector.find(input[type='checkbox']).prop('checked'))
                {
                    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.

Good Luck

EDIT

CODE SNIPPET

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

Edit 2

Added thead and tbody tags to increase resemblance to question html.