嵌套表复选框选中/取消选中

Question

我有一个带有嵌套表格和复选框的页面，用于检查所有表格单元格<td>。每个表格单元格<td> 的复选框用于检查相应的单元格。

我想做的是

1. CheckAll 复选框选中/取消选中所有 parent 和 child 复选框
2. 取消选中 parent 复选框取消选中 CheckALL 复选框并取消选中所有 child 复选框
3. Check a parent checkbox 检查所有 child 复选框并确定是否所有其他 parent 复选框都被选中，以检查 CheckALL 复选框
4. 选中 child 复选框应选中相应的 parent
5. 取消选中 child 复选框应检查兄弟姐妹是否已选中，如果未选中 parent 复选框应取消选中，如果 checkALL 复选框已选中也应该取消选中。

我无法做到这一点。

这是我尝试过的。

html:

<table class="table table-striped tablesorter">
  <thead>
    <tr colspan="2">
      <th>
        <input type="checkbox" id="checkedAll">
      </th>
      <th>Check/UnCheck ALL Boxes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" class="checkParent">
      </td>
      <td>1KWT</td>

    </tr>
    <tr>
      <td colspan="2" style="padding: 0">
        <table class="innertable" style="margin: 10px 0px 10px 50px;border: 1px solid #d0d0d0">
          <thead>
            <tr>
              <th></th>
              <th>Sub</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <input type="checkbox" class="checkChild" style="margin-top: -3px"> </td>
              <td>1KWT1</td>
            </tr>
            <tr>
              <td>
                <input type="checkbox" class="checkChild" style="margin-top: -3px"> </td>
              <td>1KWT2</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="checkParent" style="margin-top: -3px"> </td>
      <td>1OMN</td>
    </tr>
    <tr>
      <td colspan="2" style="padding: 0">
        <table class="innertable" style="margin: 10px 0px 10px 50px;border: 1px solid #d0d0d0">
          <thead>
            <tr>
            <th></th>
              <th>Sub</th>
             </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <input type="checkbox" class="checkChild" style="margin-top: -3px"> </td>
              <td>1OMN1</td>
            </tr>
            <tr>
              <td>
                <input type="checkbox" class="checkChild" style="margin-top: -3px"> </td>
              <td>1OMN2</td>
             </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

脚本：

$(document).ready(function() {

  $("#checkedAll").change(function(){
    if(this.checked){
      $(".checkParent, .checkChild").each(function(){
        this.checked=true;
      });              
    }else{
      $(".checkParent, .checkChild").each(function(){
        this.checked=false;
      });              
    }
  });

  $(".checkParent").click(function () {
    if ($(this).is(":checked")){
      var isAllChecked = 0;
      $(".checkParent").each(function(){
        if(!this.checked)
           isAllChecked = 1;
      }) 
      $(".checkChild").prop("checked", true);
      if(isAllChecked == 0){ $("#checkedAll").prop("checked", true); }     
    }else {
      $("#checkedAll, .checkChild").prop("checked", false);

    }
  });

  $(".checkChild").click(function () {
    if ($(this).is(":checked")){
    $(".checkParent").prop("checked", true);

    }else {
      $(".checkParent").prop("checked", false);

    }
  });


});

链接到小提琴https://jsfiddle.net/4zhhpwva/

Answer 1

我已经做到了。欢迎改进。这是更新的脚本

$(document).ready(function() {

  $("#checkedAll").change(function() {
    if (this.checked) {
      $(".checkParent, .checkChild").each(function() {
        this.checked = true;
      });
    } else {
      $(".checkParent, .checkChild").each(function() {
        this.checked = false;
      });
    }
  });

  $(".checkParent").click(function() {
    if ($(this).is(":checked")) {
      var isAllChecked = 0;
      $(".checkParent").each(function() {
        if (!this.checked)
          isAllChecked = 1;
      })
      $(this).closest("tr").next("tr").find(".checkChild").prop("checked", true);
      if (isAllChecked == 0) {
        $("#checkedAll").prop("checked", true);
      }
    } else {
      $("#checkedAll").prop("checked", false);
      $(this).closest("tr").next("tr").find(".checkChild").prop("checked", false);
    }
  });

  $(".checkChild").click(function() {
    if ($(this).is(":checked")) {

      var isChildChecked = 0;
      $(".checkChild").each(function() {
        if (!this.checked)
          isChildChecked = 1;
      });
      if (isChildChecked == 0) {
        $("#checkedAll").prop("checked", true);
      }
      $(this).closest("table").closest("tr").prev("tr").find(".checkParent").prop("checked", true);

    } else {
      var isAllSiblingChecked = 0;
      $(this).closest("tr").nextAll("tr").find(".checkChild").each(function() {
        if ($(this).is(":checked"))
          isAllSiblingChecked = 1;
      });

      $(this).closest("tr").prev("tr").find(".checkChild").each(function() {
        if ($(this).is(":checked"))
          isAllSiblingChecked = 1;
      });

      if (isAllSiblingChecked == 0) {
        $(this).closest("table").closest("tr").prev("tr").find(".checkParent").prop("checked", false);
      }
      $("#checkedAll").prop("checked", false);
    }
  });

});

我在这里更新了小提琴以查看工作中的https://jsfiddle.net/shumaise/4zhhpwva/10/

Answer 2

您的问题是您使用的选择器总是获取所有 checkchildren 和 ALL checkParents 而不仅仅是嵌套的。您需要使其更具体。

肯定有更好的方法来做到这一点，但作为一个例子来说明我的意思，在checkParent点击功能上，而不是$(".checkChild")，它会抓取页面上的所有checkChildren，你可能想做点什么喜欢$(this).closest("tr").next("tr").find(".checkChild")

也就是说，如果您更改标记以将它们嵌套在不与任何其他 checkChild 元素共享的共同祖先下，则可以将其简化为不需要 .next。

我已经在这里更新了你的小提琴 - https://jsfiddle.net/4zhhpwva/3/，所以你可以看到它正在工作......