选择全部并取消选择所有不在第二次工作

Question

I want select & unselect all using button.

The first time I select and unselect the code below works, but the second time, my button is not working.

HTML :

<button type="button" id="selectAll" class="main"> Select </button>
<button type="button" id="unselectAll" class="main"> UnSelect </button>

jQuery :

$("#selectAll").on("click", function() {

  $("#example tr").each(function() {
    $(this).find("input").attr('checked', true);
  });
});

$("#unselectAll").on("click", function() {

  $("#example tr").each(function() {
    $(this).find("input").removeAttr('checked');
  });
});

JSFiddle

How can I solve this?

Answer 1

Use prop() instead of attr() and you can combine them together something like:

 $("#selectAll, #unselectAll").on("click", function() { var selectAll = this.id === 'selectAll'; // no need for `each` ... jQuery will do that internally already $("#example tbody :checkbox").prop('checked', selectAll); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button" id="selectAll" class="main"> Select </button> <button type="button" id="unselectAll" class="main"> UnSelect </button> <table id="example" class="myclass" /> <thead> <tr> <th> </th> <th>Name</th> <th>Company</th> <th>Employee Type</th> <th>Address</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td> <input type="checkbox" /> </td> <td>varun</td> <td>TCS</td> <td>IT</td> <td>San Francisco</td> <td>US</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>Rahuk</td> <td>TCS</td> <td>IT</td> <td>San Francisco</td> <td>US</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>johm Doe</td> <td>TCS</td> <td>IT</td> <td>San Francisco</td> <td>US</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>Sam</td> <td>TCS</td> <td>IT</td> <td>San Francisco</td> <td>US</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>Lara</td> <td>TCS</td> <td>IT</td> <td>San Francisco</td> <td>US</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>Jay</td> <td>TCS</td> <td>IT</td> <td>San Francisco</td> <td>US</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>Tom</td> <td>TCS</td> <td>IT</td> <td>San Franciso</td> <td>US</td> </tr> </tbody> </table> 

Answer 2

Use prop instead of attr and removeAttr per this link

Sample:

 $("#selectAll").on("click", function() { $("#example tr").each(function() { $(this).find("input").prop("checked", true); }); }); $("#unselectAll").on("click", function() { $("#example tr").each(function() { $(this).find("input").prop("checked", false); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button" id="selectAll" class="main"> Select </button> <button type="button" id="unselectAll" class="main"> UnSelect </button> <table id="example" class="myclass" /> <thead> <tr> <th> </th> <th>Name</th> <th>Company</th> <th>Employee Type</th> <th>Address</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td> <input type="checkbox" /> </td> <td>varun</td> <td>TCS</td> <td>IT</td> <td>San Francisco</td> <td>US</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>Rahuk</td> <td>TCS</td> <td>IT</td> <td>San Francisco</td> <td>US</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>johm Doe</td> <td>TCS</td> <td>IT</td> <td>San Francisco</td> <td>US</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>Sam</td> <td>TCS</td> <td>IT</td> <td>San Francisco</td> <td>US</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>Lara</td> <td>TCS</td> <td>IT</td> <td>San Francisco</td> <td>US</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>Jay</td> <td>TCS</td> <td>IT</td> <td>San Francisco</td> <td>US</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>Tom</td> <td>TCS</td> <td>IT</td> <td>San Franciso</td> <td>US</td> </tr> </tbody> 

Answer 3

hope u will like it

 $("document").ready(function() { $("#mcb").change(function() { $("#example tbody :checkbox").prop("checked", $("#mcb").prop("checked")); // choose by element or id $("#example tbody #scb").prop("checked", $("#mcb").prop("checked")); }); $("[id='scb']").change(function() { if($(this).prop("checked")==false) { $("#mcb").prop("checked",false); } var tf=true; $("#example tbody #scb").each(function() { if($(this).prop("checked")==false) {tf=false;} }); $("#mcb").prop("checked",tf); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="example"/> <thead> <tr> <th><input id="mcb" type="checkbox" /></th> <th>Name</th> <th>Company</th> <th>Employee Type</th> <th>Address</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td> <input id="scb" type="checkbox" /> </td> <td>varun</td> <td>TCS</td> <td>IT</td> <td>San Francisco</td> <td>US</td> </tr> <tr> <td> <input id="scb" type="checkbox" /> </td> <td>Rahuk</td> <td>TCS</td> <td>IT</td> <td>San Francisco</td> <td>US</td> </tr> <tr> <td> <input id="scb" type="checkbox" /> </td> <td>johm Doe</td> <td>TCS</td> <td>IT</td> <td>San Francisco</td> <td>US</td> </tr> <tr> <td> <input id="scb" type="checkbox" /> </td> <td>Sam</td> <td>TCS</td> <td>IT</td> <td>San Francisco</td> <td>US</td> </tr> <tr> <td> <input id="scb" type="checkbox" /> </td> <td>Lara</td> <td>TCS</td> <td>IT</td> <td>San Francisco</td> <td>US</td> </tr> <tr> <td> <input id="scb" type="checkbox" /> </td> <td>Jay</td> <td>TCS</td> <td>IT</td> <td>San Francisco</td> <td>US</td> </tr> <tr> <td> <input id="scb" type="checkbox" /> </td> <td>Tom</td> <td>TCS</td> <td>IT</td> <td>San Franciso</td> <td>US</td> </tr> </tbody> </table>