使用 Jquery 選中和取消選中父/子復選框

Question

我必須在我的項目中使用一組復選框。

這就是我的 HTML 的樣子：

<table id="myTable">
<tr>
  <td>
    <label>
      <input type="checkbox" class="parent" name="mod[6]" value="1">
    </label>
  </td>
  <td><span>Parent Module</span></td>
  <td>
    <label>
      <input type="checkbox" name="mod[7]" value="1"> Sub Module
    </label>
    <label>
      <input type="checkbox" name="mod[8]" value="1"> Sub Module
    </label>
    <label>
      <input type="checkbox" name="mod[9]" value="1"> Sub Module
    </label>
  </td>
</tr>
<tr>.....</tr>
<tr>.....</tr>
</table>

使用此復選框，用戶可以選擇他們喜歡的父模塊和子模塊選擇。 進行該選擇時，它應該按如下方式工作。

• 當一個父被選中時，所有的子都被選中。 （父母和孩子在桌子上用一排隔開）
• 當父級未選中時，其下的所有子級均未選中。
• 至少，當檢查一個孩子時，應該檢查其父母。
• 當沒有孩子被檢查時，其父母不應該被檢查。

我在一定程度上完成了這項工作。 但我期待您的幫助來完成這項工作。

這就是我使用 Jquery 嘗試的方式。

$('#myTable').on( "change", "label > input[type=checkbox]", function(e) {
  var checkboxes = $(this).closest('tr').find("input[type=checkbox]");
  if ($(this).hasClass("parent")) { 
    if ($(this).prop("checked")) {
      checkboxes.prop("checked", true);
    }
  }
});

Answer 1

更新

在<thead>中添加了“全部選中”框 添加了稱為indeterminate的第三個狀態，當它們的一些從屬復選框被選中時，它應用於.parent或#all 。

.child類分配給從屬復選框只是為了使其更容易遵循。 詳細信息在示例中進行了注釋。

 // *️⃣ Code for indeterminate state - There are comments for removal // Bind all checkboxes to the change event $(':checkbox').on('change', checkUncheck); function checkUncheck(e) { // The tag the user checked/unchecked const $this = $(this); // Reference to the closest <tr> const $row = $this.closest('tr'); /* If the user clicked a .parent... ...and if it is checked... ... .find() all the <td> of $row... ...and check them all... ...otherwise uncheck them all */ if ($this.is('.parent')) { if ($this.is(':checked')) { $row.find('.child').prop('checked', true); } else { $row.find('.child').prop('checked', false); } } /* If the user checked/unchecked a .child... ... .makeArray() of all of $row .child and... ... if .every() <td> is .checked then check .parent ... and if .some() <td> are .checked then .parent is... ... indeterminate, otherwise uncheck .parent */ if ($this.is('.child')) { $row.find('.parent').prop('indeterminate', false); //*️⃣ const chxArray = jQuery.makeArray($row.find('.child')); let rowChecked = chxArray.every(cb => cb.checked); //*️⃣ let someChecked = chxArray.some(cb => cb.checked); if (rowChecked) { /* if (someChecked) { */ //*️⃣ $row.find('.parent').prop('checked', true); } else if (someChecked) { $row.find('.parent').prop('indeterminate', true); //*️⃣ } else { $row.find('.parent').prop('checked', false); } } /* If the user clicked #all... ...and if it is checked... ... .find() all the <td> of $tB... ...and check them all... ...otherwise uncheck them all */ if ($this.is('#all')) { $('.parent').prop('indeterminate', false); //*️⃣ if ($this.is(':checked')) { $(':checkbox').prop('checked', true); } else { $(':checkbox').prop('checked', false); } } /* If the user checked/unchecked a .child or .parent... ... .makeArray() of all of <td> in <tbody> and... ... if .every() <td> is checked... ... #all is checked and if .some() <td> are checked... ... then #all is indeterminate... ... otherwise uncheck #all */ let allArray = jQuery.makeArray($(':checkbox').not('#all')); if (allArray.every(cb => cb.checked)) { $('#all').prop('indeterminate', false); //*️⃣ $('#all').prop('checked', true); /* Move to: ✳️ */ } else if (allArray.some(cb => cb.checked)) { $('#all').prop('indeterminate', true); //*️⃣ ✳️ } else { $('#all').prop('indeterminate', false); //*️⃣ $('#all').prop('checked', false); } }

 <table><thead><tr><th><label><input type=checkbox id=all></label><th>All Modules<th><tbody><tr><td><label><input type=checkbox class=parent name=mod[6] value=1></label><td><span>Parent Module</span><td><label><input type=checkbox class=child name=mod[7] value=1> Sub Module</label> <label><input type=checkbox class=child name=mod[8] value=1> Sub Module</label> <label><input type=checkbox class=child name=mod[9] value=1> Sub Module</label><tr><td><label><input type=checkbox class=parent name=mod[6] value=1></label><td><span>Parent Module</span><td><label><input type=checkbox class=child name=mod[7] value=1> Sub Module</label> <label><input type=checkbox class=child name=mod[8] value=1> Sub Module</label> <label><input type=checkbox class=child name=mod[9] value=1> Sub Module</label><tr><td><label><input type=checkbox class=parent name=mod[6] value=1></label><td><span>Parent Module</span><td><label><input type=checkbox class=child name=mod[7] value=1> Sub Module</label> <label><input type=checkbox class=child name=mod[8] value=1> Sub Module</label> <label><input type=checkbox class=child name=mod[9] value=1> Sub Module</label></table> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

這是一個工作演示。 您需要使用其他條件更新代碼，在該條件下取消選中父母的復選框以取消選中孩子。

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('#myTable').on( "change", "label > input[type=checkbox]", function(e) { var checkboxes = $(this).closest('tr').find("input[type=checkbox]"); if ($(this).hasClass("parent")) { if ($(this).prop("checked")) { checkboxes.prop("checked", true); }else { checkboxes.prop("checked", false); } }else if($(this).hasClass("child")){ if ($(this).prop("checked")) { $(".parent").prop("checked",true) }else { $(".parent").prop("checked",false) } } }); }); </script> </head> <body> <table id="myTable"> <tr> <td> <label> <input type="checkbox" class="parent" name="mod[6]" value="1"> </label> </td> <td><span>Parent Module</span></td> <td> <label> <input class="child" type="checkbox" name="mod[7]" value="1"> Sub Module </label> <label> <input class="child" type="checkbox" name="mod[8]" value="1"> Sub Module </label> <label> <input class="child" type="checkbox" name="mod[9]" value="1"> Sub Module </label> </td> </tr> <tr>.....</tr> <tr>.....</tr> </table> </body> </html>