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

我有一个带有嵌套表和复选框的页面,用于检查所有表格单元格< td>.并且每个表格单元格的复选框< td>检查各个细胞.

我想做的是

> CheckAll复选框选中/取消选中所有父级和子级复选框
>取消选中父复选框取消选中CheckALL复选框并取消选中所有子复选框
>选中父复选框选中所有子复选框,并查看是否选中了所有其他父复选框,以选中CheckALL复选框
>检查子复选框应检查相应的父级
>取消选中子复选框应该检查兄弟姐妹是否被选中,如果没有选中,则父checbox应该取消选中,如果选中了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:///4zhhpwva/

解决方法:

我做到了欢迎改进.这是更新的脚本

$(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:///shumaise/4zhhpwva/10/

来源：https://www./content-1-420401.html