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'的相同逻辑））。 “我将在页面上检查每个孩子以及每个孩子的每个匹配值”。

我很确定我不理解.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将每个兄弟姐妹传递给一个函数

1 个答案: