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

Question

我有一个按钮，需要根据数据表中的任何复选框是否选中来隐藏或可见，

<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>

我现在已经像这样定义了我的数据表，

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']]
      
    });

我现在想要的是检查是否有任何复选框被单击...也就是说，我想在用户单击复选框时创建一个“on”函数。然后该函数将检查数据表中勾选的复选框数量。如果数字大于 0，它将显示输入按钮(通过删除隐藏属性)，如果不是，则会将隐藏属性更改为 true...

但我不明白我应该如何称呼这个函数？ 就像，

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

*function*

)}; 

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

而且，我可以在我的 table 内完成吗？而不是创建一个全新的 Jquery 函数？

Answer 1

如果我理解正确，这就是你要找的:

$(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显示属性，为了显示/隐藏您的按钮。