Question

我有一个带嵌套表和复选框的页面，用于检查所有表格单元格<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://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和所有checkParents，而不仅仅是嵌套的。你需要使它更具体。

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

之类的事情

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

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

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

2 个答案: