Home » Javascript » datatable uncheck checked attribute from javascript

datatable uncheck checked attribute from javascript

Posted by: admin November 1, 2017 Leave a comment

Questions:

From the below example, when “Get Selected Rows” button selected, how to uncheck the checked check boxes?.

//update jsfiddle to select multiple records

https://jsfiddle.net/q67L1a9a/5/

var table;
$(document).ready(function() {
  table = $('#example').DataTable({
    columnDefs: [{
      orderable: false,
      className: 'select-checkbox',
      targets: 0
    }, {
      "targets": [2],
      "visible": false,
      "searchable": false
    }],
    select: {
      style: 'os',
      selector: 'td:first-child'
    },
    order: [
      [1, 'asc']
    ]
  });
});

$('#btnSelectedRows').on('click', function() {
  var tblData = table.rows('.selected').data();
  var tmpData;
  $.each(tblData, function(i, val) {
    tmpData = tblData[i];
    alert(tmpData);
  }); 
})
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/select/1.2.1/css/select.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js"></script>
<button id="btnSelectedRows">
  Get Selected Rows
</button>

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Salary</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td></td>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td></td>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td></td>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td></td>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td></td>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td></td>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>$372,000</td>
    </tr>
    <tr>
      <td></td>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>San Francisco</td>
      <td>59</td>
      <td>$137,500</td>
    </tr>
    <tr>
      <td></td>
      <td>Rhona Davidson</td>
      <td>Integration Specialist</td>
      <td>Tokyo</td>
      <td>55</td>
      <td>$327,900</td>
    </tr>
    <tr>
      <td></td>
      <td>Colleen Hurst</td>
      <td>Javascript Developer</td>
      <td>San Francisco</td>
      <td>39</td>
      <td>$205,500</td>
    </tr>
    <tr>
      <td></td>
      <td>Sonya Frost</td>
      <td>Software Engineer</td>
      <td>Edinburgh</td>
      <td>23</td>
      <td>$103,600</td>
    </tr>
    <tr>
      <td></td>
      <td>Jena Gaines</td>
      <td>Office Manager</td>
      <td>London</td>
      <td>30</td>
      <td>$90,560</td>
    </tr>
    <tr>
      <td></td>
      <td>Quinn Flynn</td>
      <td>Support Lead</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>$342,000</td>
    </tr>
    <tr>
      <td></td>
      <td>Charde Marshall</td>
      <td>Regional Director</td>
      <td>San Francisco</td>
      <td>36</td>
      <td>$470,600</td>
    </tr>
    <tr>
      <td></td>
      <td>Haley Kennedy</td>
      <td>Senior Marketing Designer</td>
      <td>London</td>
      <td>43</td>
      <td>$313,500</td>
    </tr>
    <tr>
      <td></td>
      <td>Tatyana Fitzpatrick</td>
      <td>Regional Director</td>
      <td>London</td>
      <td>19</td>
      <td>$385,750</td>
    </tr>
    <tr>
      <td></td>
      <td>Michael Silva</td>
      <td>Marketing Designer</td>
      <td>London</td>
      <td>66</td>
      <td>$198,500</td>
    </tr>
  </tbody>
</table>
Answers:

Add this code in your JS file:

  $("tr").removeClass("selected");

Please find Working example here:
Link

Questions:
Answers:

This has multi select and uncheck after getting selected rows

HTML

<button id="btnSelectedRows">
  Get Selected Rows
</button>

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Salary</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td></td>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td></td>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td></td>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td></td>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td></td>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td></td>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>$372,000</td>
    </tr>
    <tr>
      <td></td>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>San Francisco</td>
  <td>59</td>
  <td>$137,500</td>
</tr>
<tr>
  <td></td>
  <td>Rhona Davidson</td>
  <td>Integration Specialist</td>
  <td>Tokyo</td>
  <td>55</td>
  <td>$327,900</td>
</tr>
<tr>
  <td></td>
  <td>Colleen Hurst</td>
  <td>Javascript Developer</td>
  <td>San Francisco</td>
  <td>39</td>
  <td>$205,500</td>
</tr>
<tr>
  <td></td>
  <td>Sonya Frost</td>
  <td>Software Engineer</td>
  <td>Edinburgh</td>
  <td>23</td>
  <td>$103,600</td>
</tr>
<tr>
  <td></td>
  <td>Jena Gaines</td>
  <td>Office Manager</td>
  <td>London</td>
  <td>30</td>
  <td>$90,560</td>
</tr>
<tr>
  <td></td>
  <td>Quinn Flynn</td>
  <td>Support Lead</td>
  <td>Edinburgh</td>
  <td>22</td>
  <td>$342,000</td>
</tr>
<tr>
  <td></td>
  <td>Charde Marshall</td>
  <td>Regional Director</td>
  <td>San Francisco</td>
  <td>36</td>
  <td>$470,600</td>
</tr>
<tr>
  <td></td>
  <td>Haley Kennedy</td>
  <td>Senior Marketing Designer</td>
  <td>London</td>
  <td>43</td>
  <td>$313,500</td>
</tr>
<tr>
  <td></td>
  <td>Tatyana Fitzpatrick</td>
  <td>Regional Director</td>
  <td>London</td>
  <td>19</td>
  <td>$385,750</td>
</tr>
<tr>
  <td></td>
  <td>Michael Silva</td>
  <td>Marketing Designer</td>
  <td>London</td>
  <td>66</td>
  <td>$198,500</td>
</tr>
</tbody>
</table>

JS

$(“tr”).removeClass(“selected”);
To unselect the selected rows

var table;
$(document).ready(function() {
table = $('#example').DataTable({
columnDefs: [{
  orderable: false,
  className: 'select-checkbox',
  targets: 0
}, {
  "targets": [2],
  "visible": false,
  "searchable": false
}],
select: {
  style: 'multi',
  selector: 'td:first-child'
},
order: [
  [1, 'asc']
]
});
});

$('#btnSelectedRows').on('click', function() {
 var tblData = table.rows('.selected').data();
 var tmpData;
 $("tr").removeClass("selected");
 $.each(tblData, function(i, val) {
tmpData = tblData[i];
alert(tmpData);
}); 
})