datatable取消选中javascript中的checked属性

时间：2017-10-26 12:04:27

标签： javascript datatables

从下面的示例中，选择“获取选定的行”按钮时，如何取消选中选中的复选框？。

//更新jsfiddle以选择多个记录

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>

2 个答案:

答案 0 :(得分：0)

在JS文件中添加此代码：

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

请在此处找到工作示例： Link

答案 1 :(得分：0)

在获取所选行

后，这会有多选和取消选中

<强> 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（ “选择”）;   取消选择所选行

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);
}); 
})
相关问题
最新问题