JQuery 将每个兄弟传递给一个函数

Question

我在使用 JQuery 中的 .siblings().each() 时遇到问题。我有一个嵌套的复选框列表。一个功能是您选中一个复选框，它还会选中所有具有相同值的相应复选框。这样可行。然后，如果您选中父复选框，则将选择所有子项（兄弟姐妹）。这也行。

我遇到的问题是选中一个父复选框，然后在每个子（兄弟）上调用一个函数来选中具有相同值的其他复选框。基本上将每个兄弟传递给 checkAllSameUser 函数。

这是 HTML:

<ul>
<li><input type='checkbox' class="build-checkbox" value="1"  /> 1</li>
<li><input type='checkbox' class="build-checkbox" value="2"  /> 2
  <ul>
    <li><input type='checkbox' class="build-checkbox" value="3"  /> 3</li>
  </ul>
</li>
<li><input type='checkbox' class="build-checkbox" value="4"  /> 4
  <ul>
    <li><input type='checkbox' class="build-checkbox" value="3"  /> 3</li>
     <li><input type='checkbox' class="build-checkbox" value="5"  /> 5</li>
  </ul>
</li>
<li><input type='checkbox' class="build-checkbox" value="6"  /> 6
  <ul>
    <li><input type='checkbox' class="build-checkbox" value="5"  /> 5</li>
     <li><input type='checkbox' class="build-checkbox" value="7"  /> 7</li>
  </ul>
</li>

JQuery:

    $(".build-checkbox").change(function () {
    checkAllSameUser($(this));
});

function checkAllSameUser(user) {
    var val = user.val();
    if ($(user).is(":checked")) {

        $(":checkbox[value='" + val + "']").prop("checked", true);
    }
    else {
        $(":checkbox[value='" + val + "']").prop("checked", false);
    }
};

$(function () {
    $("input[type='checkbox']").change(function () {
        $(this).siblings('ul')
             .find("input[type='checkbox']")
             .prop('checked', this.checked);
        $(this).siblings('ul').each(function () {
            checkAllSameUser($(this).find('input[type=checkbox]'));
        });
    });
});

JSFiddle：http://jsfiddle.net/mU3FV/376/

基本上，如果您点击选中“4”复选框，那么页面上的所有“3”和“5”复选框也将被选中（遵循点击“3”或“5”的相同逻辑' 单独）。 "I'm going to check each child and each matching value of each child on the page"本质上。

我很确定我没有理解 .each 函数或没有正确传递每个同级对象。如果有任何意见，我将不胜感激... JQuery 和 Javascript 不是我的强项。

Answer 1

您正在寻找这样的逻辑吗？

$(".build-checkbox").change(function() {
  checkAllSameUser($(this));
});

function checkAllSameUser(user) {
  var val = user.val();
  if ($(user).is(":checked")) {
    $(":checkbox[value='" + val + "']").prop("checked", true);
  } else {
    $(":checkbox[value='" + val + "']").prop("checked", false);
  }
};

$(function() {
  $("input[type='checkbox']").change(function() {
    var val = $(this).val();
    $(this).siblings('ul').find("input[type='checkbox']").prop('checked', this.checked);
    $(this).siblings('ul').find("input[type='checkbox']").each(function() {
      checkAllSameUser($(this));
    });
  });
});

li ul {
  padding-left: 25px;
  border: none;
  display: block;
}

ul {
  border: 2px solid blue;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <input type='checkbox' class="build-checkbox" value="1" /> 1</li>
  <li>
    <input type='checkbox' class="build-checkbox" value="2" /> 2
    <ul>
      <li>
        <input type='checkbox' class="build-checkbox" value="3" /> 3</li>
    </ul>
  </li>
  <li>
    <input type='checkbox' class="build-checkbox" value="4" /> 4
    <ul>
      <li>
        <input type='checkbox' class="build-checkbox" value="3" /> 3</li>
      <li>
        <input type='checkbox' class="build-checkbox" value="5" /> 5</li>
    </ul>
  </li>
  <li>
    <input type='checkbox' class="build-checkbox" value="6" /> 6
    <ul>
      <li>
        <input type='checkbox' class="build-checkbox" value="5" /> 5</li>
      <li>
        <input type='checkbox' class="build-checkbox" value="7" /> 7</li>
    </ul>
  </li>
</ul>

注意

$(this).siblings('ul').find("input[type='checkbox']").each(function() {
  checkAllSameUser($(this));
});

而不是

$(this).siblings('ul').each(function () {
    checkAllSameUser($(this));
});

JQuery 将每个兄弟传递给一个函数

JQuery Passing Each Sibling to a Function

javascript

jquery

list

parent-child

siblings