如何使用jquery在数据表中查看复选框是否已切换并据此执行操作？

问题描述

我有一个按钮，根据是否已选中dataTable中的任何复选框，我需要隐藏或显示该按钮，

<input type = "submit" id = "update-button" class = "ml-5 btn btn-warning" value = "Update Selected" style = "color: white" hidden>

我将这两个用于我的数据表中的复选框

<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script>

我现在已经这样定义了我的DataTable，

var table = $("#classroom_teachers_table").DataTable({
      "processing": true,"paging": true,"serverSide": true,"info": false,"ajax": {
        url: "action.php",method: "POST",data: {action: "get_classroom_teachers"},},'columnDefs': [
         {
            'targets': 0,'checkboxes': {
               'selectRow': true
            }
         }
      ],'select': {
         'style': 'multi'
      },'order': [[1,'asc']]
      
    });

我现在要检查是否单击了任何复选框...也就是说，每当用户单击复选框时，我都希望启用“打开”功能。然后，该功能将检查数据表中勾选的复选框的数量。如果数字大于0，它将显示输入按钮（通过删除隐藏的属性），如果没有，则将隐藏的属性更改为true ...

但是我不知道该怎么称呼这个功能？ 喜欢，

$("#classroom_teachers_table tbody).on("click",function(){ 

*function*

)}; 

我应该写什么而不是 #classroom_teachers_table tbody ，以便仅在单击/取消选中复选框时才调用此函数？

而且，我可以在桌子上做吗？而不是创建一个全新的Jquery函数？

解决方法

如果我没看错，这就是您要寻找的东西：

$(document).ready(function() {
   var table = $('#example').DataTable({
      'ajax': 'https://gyrocode.github.io/files/jquery-datatables/arrays_id.json','columnDefs': [
         {
            'targets': 0,'checkboxes': {
               'selectRow': true,'selectCallback': function(nodes,selected) {
                  
                  var rows_selected = table.column(0).checkboxes.selected();
                  if(rows_selected.length > 0) $("#update-button").show();
                  else $("#update-button").hide();
               }
            }
         }
      ],'select': 'multi','order': [[1,'asc']]
   });
});

<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.10/css/dataTables.checkboxes.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.10/js/dataTables.checkboxes.min.js"></script>

<input type="submit" id="update-button" class="ml-5 btn btn-warning" value="Update Selected" style="color: white; display: none;">
<br><br>
<table id="example" class="display" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th></th>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Extn</th>
         <th>Start date</th>
         <th>Salary</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th></th>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Age</th>
         <th>Start date</th>
         <th>Salary</th>
      </tr>
   </tfoot>
</table>

注意：由于某些原因，隐藏属性在代码段中不起作用，因此我不得不使用 CSS display 属性，以显示/隐藏您的按钮。

快乐编码！