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

Question

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

我想做的是

1. CheckAll 复选框选中/取消选中所有parent 和child 复选框
2. 取消选中parent 复选框取消选中CheckALL 复选框并取消选中所有child 复选框
3. 选中一个parent checkbox 检查所有child checkbox 并找出所有其他parent checkbox是否被选中，检查 CheckALL 复选框
4. 选中子复选框应该选中相应的父
5. 取消选中 child 复选框应该检查 sibling 是否被选中，如果没有选中 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);

    }
  });


});

fiddle 链接 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);
    }
  });

});

我在这里更新了 fiddle 以查看工作 https://jsfiddle.net/shumaise/4zhhpwva/10/