JQuery Передача каждого брата в функцию

Question

У меня проблемы с .siblings().each() в JQuery. У меня есть вложенный список флажков. Одна функциональность заключается в том, что вы устанавливаете флажок, а также проверяет все соответствующие флажки, имеющие одинаковое значение. Это работает. Затем, если вы установите родительский флажок, будут выбраны все дочерние элементы (братья и сестры). Это тоже работает.

У меня проблемы с проверкой родительского флажка, а затем вызовом функции для каждого дочернего элемента (родного брата) для проверки других флажков того же значения. В основном, передавая каждого родного брата 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));
});