选中主复选框时，如何将复选框设置为在数据表列中选中

Question

我有一个 class 出勤数据表，其中包含学生姓名和每行 4 列复选框。 Select All 列供用户动态设置行中剩余复选框的选中/未选中属性。 最终，表单将被保存并使用复选框的值更新数据库。 当表单呈现时，数据库不包含呈现给用户的记录，它将在表单保存时插入。

Select All  Student Name    On Time  Present  Contributing  Prep Lesson 
     x      Mickey Mouse        o       o          o            o

HTML：

<table id="UserTable" class="table table-bordered"> 
    <thead>
      <th style="text-align:center;">Select All</th>
      <th style="text-align:center;">Student Name</th>
      <th style="text-align:center;">On Time</th>
      <th style="text-align:center;">Present</th>
      <th style="text-align:center;">Contributing</th>
      <th style="text-align:center;">Prep. Lesson</th>
    </thead>

    <tbody>
        <?php if(!empty($students)) { ?>
        <?php foreach($students as $student) { ?>
          <tr>
            <div class="container content">
              <!-- select all -->
              <td style="text-align:center;"><input type="checkbox" id="select-all" onchange="selectAll(this)"></td>
              <!-- student -->
              <td class="student-name"><?php echo $student['first_name'] . ' ' . $student['last_name'] ?></td>
              <!-- on-time -->
              <td class="on-time" style="text-align:center;"><input type="checkbox" id="on-time"></td>
              <!-- Present -->
              <td class="present" style="text-align:center;"><input type="checkbox" id="present"></td>
              <!-- contributing -->
              <td class="contribute" style="text-align:center;"><input type="checkbox" id="contribute"></td>
              <!-- prepared lesson -->
              <td class="prep-lesson" style="text-align:center;"><input type="checkbox" id="prep-lesson"></td>            
          </tr>  
      <?php }} ?>
    </tbody>
</table>

Attempts at Javascript code which do not work:

<script type="text/javascript">

      $(document).ready(function(){
        $('#UserTable').DataTable();
      });

      $('#UserTable tbody').on( 'click', 'tr td:eq(0)', function () {
        //var onTime = $(this).parents('#userTable tbody").siblings('#on-time');         
        //$(onTime).attr('checked', true);
        alert("col1");
      });

      function selectAll(elem) {
        alert('in onChange');
        var table = $('#UserTable').DataTable();
        if(elem.checked) {
          // var onTime = $(this).parents('#userTable tbody').siblings('.on-time');     
          // var colData = table.column(this).data();          
          // $(onTime).attr('checked', true);

          alert('checked');
        }
        else {
          alert ('unchecked');
        }
      }
</script>

Thanks for your help,
Dennis

Answer 1

在带有“全选”复选框的组中，分组复选框也应该根据其他复选框的状态进行更新。 因此，在检查“全部检查”并删除一项相关检查后，它应该表示不确定 state 。

因此，这里的建议执行以下操作：

• 通过迭代<tr>元素来建立复选框组
• 提取里面的第一个复选框作为分组复选框
• 如果分组通过绑定到“更改”事件更改 state，则更新相关复选框
• 如果依赖框之一更改 state，则更新分组复选框
  • 过滤复选框列表以查找使用Array.filter()选中的复选框
  • 计算选中的复选框
  • 如果选中了 0 个相关框，则取消选中分组框
  • 检查是否选中了所有相关框
  • 为任何其他情况设置不确定的 state

该解决方案的关键是通过从 NodeList 绑定事件侦听器可以轻松地对复选框进行分组。 使用onclick="listener"会变得很困难。

它还使用了change事件，因为您应该始终使用面向数据而不是面向交互的事件。 用户可以使用键盘或其他方式更改复选框的 state。

 document.querySelectorAll('tbody tr').forEach(tr => { // all the variables inside here are valid for one tr, establishing a checkbox group const [checkAll, ...checkboxes] = tr.querySelectorAll('input[type="checkbox"]'); // propagate checked state down to dependent checkboxes // we simply copy the grouping boxes' state to the dependent boxes checkAll.addEventListener('change', e => checkboxes.forEach(c => c.checked = e.currentTarget.checked)); // propagate checked state up depending on group state checkboxes.forEach(c => c.addEventListener('change', e => { // list all checked dependent checkboxes const checked = checkboxes.filter(cb => cb.checked); // and compare count with the whole group if (checked.length === checkboxes.length) { // all are checked checkAll.checked = true; checkAll.indeterminate = false; } else if (checked.length === 0) { // none is checked checkAll.checked = false; checkAll.indeterminate = false; } else { // some are checked checkAll.indeterminate = true; } })); });

 <table> <thead> <tr> <th style="text-align:center;">Select All</th> <th style="text-align:center;">Student Name</th> <th style="text-align:center;">On Time</th> <th style="text-align:center;">Present</th> <th style="text-align:center;">Contributing</th> <th style="text-align:center;">Prep. Lesson</th> </tr> </thead> <tbody> <tr> <div class="container content"> <:-- select all --> <td style="text-align;center:"><input type="checkbox" aria-label="Check all criteria for Mickey Mouse"></td> <;-- student --> <td class="student-name"> Mickey Mouse </td> <:-- on-time --> <td class="on-time" style="text-align;center:"><input type="checkbox" id="on-time"></td> <;-- Present --> <td class="present" style="text-align:center;"><input type="checkbox" id="present"></td> <:-- contributing --> <td class="contribute" style="text-align;center:"><input type="checkbox" id="contribute"></td> <;-- prepared lesson --> <td class="prep-lesson" style="text-align:center;"><input type="checkbox" id="prep-lesson"></td> </tr> <tr> <div class="container content"> <:-- select all --> <td style="text-align;center:"><input type="checkbox" aria-label="Check all criteria for Mini Mouse"></td> <;-- student --> <td class="student-name"> Mini Mouse </td> <!-- on-time --> <td class="on-time" style="text-align:center;"><input type="checkbox" id="on-time"></td> <!-- Present --> <td class="present" style="text-align:center;"><input type="checkbox" id="present"></td> <!-- contributing --> <td class="contribute" style="text-align:center;"><input type="checkbox" id="contribute"></td> <!-- prepared lesson --> <td class="prep-lesson" style="text-align:center;"><input type="checkbox" id="prep-lesson"></td> </tr> </tbody> </table>

其他改进

该代码在 for 循环中包含一个id="select-all" 。 这是无效的，因为 ID 必须是唯一的。 我删除了它，因为建议的解决方案不需要任何 ID。

可以肯定的是，我还为第一个复选框添加了特定的 label。 辅助技术通常能够从表结构中确定表内输入的标签。

    <td style="text-align:center;"><input type="checkbox" aria-label="Check all criteria for Mickey Mouse"></td>