父复选框首先遍历孩子，然后停止

时间：2019-03-18 19:48:34

标签： jquery checkbox

我有一个父级复选框和多个子级。当我选择顶级父级时，也会像我期望的那样选择子级。但是，其他父母的所有子女也都接受了检查。我希望它在不检查下一个子级的情况下在下一个父级停止。 

$(".ParentsourcefileCheckBox").click(function() {
  var Titletextbox = $(this)
    .closest("tr")
    .find("input[type=checkbox][name=sourcefileCheckBox]")
    .val();
  var myRow = $(this).closest("tr"),
    rowWithInput = myRow.nextAll(":has('.ChildsourcefileCheckBox')"),
    val = rowWithInput.find(".ChildsourcefileCheckBox").val();
  if (
    $(this)
    .closest("tr")
    .find("input[type=checkbox][name=sourcefileCheckBox]")
    .is(":checked")
  ) {
    rowWithInput
      .find("input[type=checkbox][name=sourcefileCheckBox]")
      .prop("checked", true);
    rowWithInput
      .find("input[type=checkbox][name=sourcefileCheckBox]")
      .attr("disabled", true);
  } else {
    rowWithInput
      .find("input[type=checkbox][name=sourcefileCheckBox]")
      .prop("checked", false);
    rowWithInput
      .find("input[type=checkbox][name=sourcefileCheckBox]")
      .attr("disabled", false);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-framed" id="seconDTable" style="display:block;height: 100%;">
  <tbody id="secondtbody">
    <tr name="myRow">
      <td style="width: 100%;">
        <div class="checker" id="uniform- CheckBox">
          <span>
            <input
              title="Select All Bookmarks"
              class="styled"
              id="CheckBox"
              type="checkbox"
              permission="0"
            />
          </span>
        </div>
        <span>Select All</span>
      </td>
    </tr>
    <tr name="myRow">
      <td style="width: 100%;">
        <input name="sourcefileCheckBox" class="ParentsourcefileCheckBox" id="checkBox" type="checkbox" value="LEAD Technologies" permission="0" />
        <span>LEAD Technologies</span>
      </td>
    </tr>
    <tr name="myRow">
      <td style="width: 100%;">
        &nbsp;&nbsp;&nbsp;<input name="sourcefileCheckBox" class="ChildsourcefileCheckBox" id="checkBox" type="checkbox" value="About LEAD Technologies" permission="0" />
        <span>About LEAD Technologies</span>
      </td>
    </tr>
    <tr name="myRow">
      <td style="width: 100%;">
        &nbsp;&nbsp;&nbsp;
        <input name="sourcefileCheckBox" class="ChildsourcefileCheckBox" id="checkBox" type="checkbox" value="Fast Facts" permission="0" />
        <span>Fast Facts</span>
      </td>
    </tr>
    <tr name="myRow">
      <td style="width: 100%;">
        &nbsp;&nbsp;&nbsp;<input name="sourcefileCheckBox" class="ChildsourcefileCheckBox" id="checkBox" type="checkbox" value="Developer Tools" permission="0" />
        <span>Developer Tools</span>
      </td>
    </tr>
    <tr name="myRow">
      <td style="width: 100%;">
        &nbsp;&nbsp;&nbsp;<input name="sourcefileCheckBox" class="ChildsourcefileCheckBox" id="checkBox" type="checkbox" value="Imaging Applications/Utilities" permission="0" />
        <span>Imaging Applications/Utilities</span>
      </td>
    </tr>
    <tr name="myRow">
      <td style="width: 100%;">
        <input name="sourcefileCheckBox" class="ParentsourcefileCheckBox" id="checkBox" type="checkbox" value="Why Use LEADTOOLS" permission="0" />
        <span>Why Use LEADTOOLS</span>
      </td>
    </tr>
    <tr name="myRow">
      <td style="width: 100%;">
        &nbsp;&nbsp;&nbsp;<input name="sourcefileCheckBox" class="ChildsourcefileCheckBox" id="checkBox" type="checkbox" value="Time-Tested" permission="0" />
        <span>Time-Tested</span>
      </td>
    </tr>
    <tr name="myRow">
      <td style="width: 100%;">
        &nbsp;&nbsp;&nbsp;<input name="sourcefileCheckBox" class="ChildsourcefileCheckBox" id="checkBox" type="checkbox" value="One SDK Vendor Who Does it All!" permission="0" />
        <span>One SDK Vendor Who Does it All!</span>
      </td>
    </tr>
  </tbody>
</table>

1 个答案:

答案 0 :(得分：1)

好吧，我认为可以更改布局，但考虑到您的评论是不可能的（没有该布局，代码可以大大简化）。

您正在使用nextAll方法来获取以下兄弟姐妹，其中包括所有兄弟姐妹（还包括ParentsourcefileCheckBox兄弟姐妹）。

只需通过nextUntil方法进行更改，它将停止在您指定的选择器中。

更改此：

rowWithInput = myRow.nextAll(":has('.ChildsourcefileCheckBox')")

通过这个：

rowWithInput = myRow.nextUntil(
    ":has('.ParentsourcefileCheckBox')",
    ":has('.ChildsourcefileCheckBox')"
)

这里您对更改有相同的提琴（我已经简化了一些代码）：

$(".ParentsourcefileCheckBox").click(function() {
  var search = "input[type=checkbox][name=sourcefileCheckBox]",
    myRow = $(this).closest("tr"),
    ischecked = myRow
      .find(search)
      .is(":checked"),
    rowWithInput = myRow.nextUntil(
      ":has('.ParentsourcefileCheckBox')",
      ":has('.ChildsourcefileCheckBox')"
    );

  rowWithInput
    .find(search)
    .prop({
      "checked": ischecked,
      "disabled": ischecked
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-framed" id="seconDTable" style="display:block;height: 100%;">
  <tbody id="secondtbody">
    <tr name="myRow">
      <td style="width: 100%;">
        <div class="checker" id="uniform- CheckBox">
          <span>
            <input
              title="Select All Bookmarks"
              class="styled"
              id="CheckBox"
              type="checkbox"
              permission="0"
            />
          </span>
        </div>
        <span>Select All</span>
      </td>
    </tr>
    <tr name="myRow">
      <td style="width: 100%;">
        <input name="sourcefileCheckBox" class="ParentsourcefileCheckBox" id="checkBox" type="checkbox" value="LEAD Technologies" permission="0" />
        <span>LEAD Technologies</span>
      </td>
    </tr>
    <tr name="myRow">
      <td style="width: 100%;">
        &nbsp;&nbsp;&nbsp;<input name="sourcefileCheckBox" class="ChildsourcefileCheckBox" id="checkBox" type="checkbox" value="About LEAD Technologies" permission="0" />
        <span>About LEAD Technologies</span>
      </td>
    </tr>
    <tr name="myRow">
      <td style="width: 100%;">
        &nbsp;&nbsp;&nbsp;<input name="sourcefileCheckBox" class="ChildsourcefileCheckBox" id="checkBox" type="checkbox" value="Fast Facts" permission="0" />
        <span>Fast Facts</span>
      </td>
    </tr>
    <tr name="myRow">
      <td style="width: 100%;">
        &nbsp;&nbsp;&nbsp;<input name="sourcefileCheckBox" class="ChildsourcefileCheckBox" id="checkBox" type="checkbox" value="Developer Tools" permission="0" />
        <span>Developer Tools</span>
      </td>
    </tr>
    <tr name="myRow">
      <td style="width: 100%;">
        &nbsp;&nbsp;&nbsp;<input name="sourcefileCheckBox" class="ChildsourcefileCheckBox" id="checkBox" type="checkbox" value="Imaging Applications/Utilities" permission="0" />
        <span>Imaging Applications/Utilities</span>
      </td>
    </tr>
    <tr name="myRow">
      <td style="width: 100%;">
        <input name="sourcefileCheckBox" class="ParentsourcefileCheckBox" id="checkBox" type="checkbox" value="Why Use LEADTOOLS" permission="0" />
        <span>Why Use LEADTOOLS</span>
      </td>
    </tr>
    <tr name="myRow">
      <td style="width: 100%;">
        &nbsp;&nbsp;&nbsp;<input name="sourcefileCheckBox" class="ChildsourcefileCheckBox" id="checkBox" type="checkbox" value="Time-Tested" permission="0" />
        <span>Time-Tested</span>
      </td>
    </tr>
    <tr name="myRow">
      <td style="width: 100%;">
        &nbsp;&nbsp;&nbsp;<input name="sourcefileCheckBox" class="ChildsourcefileCheckBox" id="checkBox" type="checkbox" value="One SDK Vendor Who Does it All!" permission="0" />
        <span>One SDK Vendor Who Does it All!</span>
      </td>
    </tr>
  </tbody>
</table>

相关问题
最新问题