JQuery выбрать все флажок; Снимите флажок родительский, когда флажок дочернего элемента снят

Я создал JSFiddle. При просмотре проверьте родитель и увидите, что дети выбраны. В идеале, когда ребенок отменен, я бы хотел, чтобы родители не отмечались, это может быть один или два родителя, в зависимости от того, что было отменено (родитель должен действовать как выбор для всех детей, находящихся под ним).

Я не уверен, что лучший способ сделать это благодаря вложенности.

$("input[type='checkbox']").change(function() {
  $(this).siblings()
    .find("input[type='checkbox']")
    .prop('checked', this.checked);
});
#listContainer {
  /*width:400px;*/
  width: 100%;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.listItem {
  margin: 5px 0px 5px 15px;
  border: 0px;
  /*background-color: #cecece;*/
  padding: 1px;
  /*cursor: move;*/
}

.phaseItem {
  /*background: #ccc;*/
  min-height: 30px;
}

.phaseTitle {
  /*  background:#abc;
  padding:10px;*/
}

.weekItem {
  /*margin: 0px 0px 0px 10px;*/
  min-height: 30px;
  /*padding: 10px;*/
}

.weekTitle {
  /*margin: 0px 0px 0px 10px;
    border: 1px solid #999;
    background-color: #fff;
    padding: 5px;*/
  /*cursor: pointer;*/
}

.dayItem {
  /*  background: #fff;
  padding:10px;*/
  min-height: 30px;
  /*margin: 0px 0px 0px 10px;*/
}

.dayTitle {
  /*    margin: 0px 0px 0px 10px;
    border: 1px solid #999;
    background-color: #fff;
    padding: 5px;*/
  /*cursor: pointer;*/
}

.itemPlaceholder {
  border: 1px dashed #cecece;
  font-weight: bold;
  font-size: 45px;
  background-color: #fce77e;
  min-height: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="listContainer">
  <ul class="srtable ui-sortable">
    <li class="listItem phaseItem ui-sortable-handle ui-sortable">

      <div class="listItem phaseTitle ui-sortable-handle ui-sortable">
        <i class="glyphicon weekToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="phase" id="phase_cb_1" class="ui-sortable-handle"> Phase 1
        <div class="listItem weekItem ui-sortable-handle ui-sortable" style="">

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_1" class="ui-sortable-handle"> Week 1
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_2" class="ui-sortable-handle"> Week 2
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_3" class="ui-sortable-handle"> Week 3
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

            </div>
          </div>

        </div>
      </div>

      <div class="listItem phaseTitle ui-sortable-handle ui-sortable">
        <i class="glyphicon weekToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="phase" id="phase_cb_2" class="ui-sortable-handle"> Phase 2
        <div class="listItem weekItem ui-sortable-handle ui-sortable" style="">

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_1" class="ui-sortable-handle"> Week 1
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_2" class="ui-sortable-handle"> Week 2
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_3" class="ui-sortable-handle"> Week 3
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_4" class="ui-sortable-handle"> Week 4
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

            </div>
          </div>

        </div>
      </div>

      <div class="listItem phaseTitle ui-sortable-handle ui-sortable">
        <i class="glyphicon glyphicon-chevron-up weekToggle ui-sortable-handle"></i> <input type="checkbox" name="phase" id="phase_cb_3" class="ui-sortable-handle"> Phase 3
        <div class="listItem weekItem hide ui-sortable-handle ui-sortable" style="">

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_1" class="ui-sortable-handle"> Week 1
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_5" class="ui-sortable-handle"> Day 5</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_2" class="ui-sortable-handle"> Week 2
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

            </div>
          </div>

        </div>
      </div>

      <div class="listItem phaseTitle ui-sortable-handle ui-sortable">
        <i class="glyphicon glyphicon-chevron-up weekToggle ui-sortable-handle"></i> <input type="checkbox" name="phase" id="phase_cb_4" class="ui-sortable-handle"> Phase 4
        <div class="listItem weekItem hide ui-sortable-handle ui-sortable" style="">

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_1" class="ui-sortable-handle"> Week 1
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_5" class="ui-sortable-handle"> Day 5</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_2" class="ui-sortable-handle"> Week 2
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_3" class="ui-sortable-handle"> Week 3
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

            </div>
          </div>

        </div>
      </div>

      <div class="listItem phaseTitle ui-sortable-handle ui-sortable">
        <i class="glyphicon glyphicon-chevron-up weekToggle ui-sortable-handle"></i> <input type="checkbox" name="phase" id="phase_cb_5" class="ui-sortable-handle"> Phase 5
        <div class="listItem weekItem hide ui-sortable-handle ui-sortable" style="">

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_1" class="ui-sortable-handle"> Week 1
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_2" class="ui-sortable-handle"> Week 2
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_3" class="ui-sortable-handle"> Week 3
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_4" class="ui-sortable-handle"> Week 4
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_5" class="ui-sortable-handle"> Week 5
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_5" class="ui-sortable-handle"> Day 5</div>

            </div>
          </div>

        </div>
      </div>

    </li>
  </ul>
</div>

Я включил код JS ниже, но чтобы получить полную картину, пожалуйста, посетите JSFiddle.

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

Я тоже пробовал это, но он снимает все элементы одного уровня:

$("input[type='checkbox']").change(function() {
  if ($(this).is(':checked')) {
    $(this).siblings()
      .find("input[type='checkbox']")
      .prop('checked', this.checked);
  } else {
    $(this).parents()
      .find("input[type='checkbox']")
      .prop('checked', this.checked);
  }
});
Источник

2 ответа

Решение

Изменить: Согласно комментарию, использование рекурсивной функции решит проблему.

let checkbox = "input[type='checkbox']";

$(checkbox).change(function() {
  let $this = $(this);
  CheckChildren($this);
  CheckParents($this);
});

let CheckChildren = function($this) {
  $this.siblings()
    .find(checkbox)
    .prop('checked', $this.is(":checked"));
}

let CheckParents = function($this) {
  let $parent = $this.parent().parent();
  if($parent.length == 0) return;
  // get the number of all checkboxes that $parent contains
  // get the number of checked checkboxes that $parent contains
  // if the two numbers equals, this checkbox($parent.siblings(checkbox)) should be checked.
  let checked = $parent.find(checkbox).length
            === $parent.find(`${checkbox}:checked`).length;
            // this is "template strings"
            // `${checkbox}:checked` = checkbox + ":checked"
  CheckParents($parent.siblings(checkbox).prop("checked", checked));
}
#listContainer {
  /*width:400px;*/
  width: 100%;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.listItem {
  margin: 5px 0px 5px 15px;
  border: 0px;
  /*background-color: #cecece;*/
  padding: 1px;
  /*cursor: move;*/
}

.phaseItem {
  /*background: #ccc;*/
  min-height: 30px;
}

.phaseTitle {
  /*  background:#abc;
  padding:10px;*/
}

.weekItem {
  /*margin: 0px 0px 0px 10px;*/
  min-height: 30px;
  /*padding: 10px;*/
}

.weekTitle {
  /*margin: 0px 0px 0px 10px;
    border: 1px solid #999;
    background-color: #fff;
    padding: 5px;*/
  /*cursor: pointer;*/
}

.dayItem {
  /*  background: #fff;
  padding:10px;*/
  min-height: 30px;
  /*margin: 0px 0px 0px 10px;*/
}

.dayTitle {
  /*    margin: 0px 0px 0px 10px;
    border: 1px solid #999;
    background-color: #fff;
    padding: 5px;*/
  /*cursor: pointer;*/
}

.itemPlaceholder {
  border: 1px dashed #cecece;
  font-weight: bold;
  font-size: 45px;
  background-color: #fce77e;
  min-height: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="listContainer">
  <ul class="srtable ui-sortable">
    <li class="listItem phaseItem ui-sortable-handle ui-sortable">

      <div class="listItem phaseTitle ui-sortable-handle ui-sortable">
        <i class="glyphicon weekToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="phase" id="phase_cb_1" class="ui-sortable-handle"> Phase 1
        <div class="listItem weekItem ui-sortable-handle ui-sortable" style="">

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_1" class="ui-sortable-handle"> Week 1
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_2" class="ui-sortable-handle"> Week 2
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_3" class="ui-sortable-handle"> Week 3
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

            </div>
          </div>

        </div>
      </div>

      <div class="listItem phaseTitle ui-sortable-handle ui-sortable">
        <i class="glyphicon weekToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="phase" id="phase_cb_2" class="ui-sortable-handle"> Phase 2
        <div class="listItem weekItem ui-sortable-handle ui-sortable" style="">

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_1" class="ui-sortable-handle"> Week 1
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_2" class="ui-sortable-handle"> Week 2
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_3" class="ui-sortable-handle"> Week 3
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_4" class="ui-sortable-handle"> Week 4
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

            </div>
          </div>

        </div>
      </div>

      <div class="listItem phaseTitle ui-sortable-handle ui-sortable">
        <i class="glyphicon glyphicon-chevron-up weekToggle ui-sortable-handle"></i> <input type="checkbox" name="phase" id="phase_cb_3" class="ui-sortable-handle"> Phase 3
        <div class="listItem weekItem hide ui-sortable-handle ui-sortable" style="">

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_1" class="ui-sortable-handle"> Week 1
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_5" class="ui-sortable-handle"> Day 5</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_2" class="ui-sortable-handle"> Week 2
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

            </div>
          </div>

        </div>
      </div>

      <div class="listItem phaseTitle ui-sortable-handle ui-sortable">
        <i class="glyphicon glyphicon-chevron-up weekToggle ui-sortable-handle"></i> <input type="checkbox" name="phase" id="phase_cb_4" class="ui-sortable-handle"> Phase 4
        <div class="listItem weekItem hide ui-sortable-handle ui-sortable" style="">

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_1" class="ui-sortable-handle"> Week 1
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_5" class="ui-sortable-handle"> Day 5</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_2" class="ui-sortable-handle"> Week 2
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_3" class="ui-sortable-handle"> Week 3
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

            </div>
          </div>

        </div>
      </div>

      <div class="listItem phaseTitle ui-sortable-handle ui-sortable">
        <i class="glyphicon glyphicon-chevron-up weekToggle ui-sortable-handle"></i> <input type="checkbox" name="phase" id="phase_cb_5" class="ui-sortable-handle"> Phase 5
        <div class="listItem weekItem hide ui-sortable-handle ui-sortable" style="">

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_1" class="ui-sortable-handle"> Week 1
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_2" class="ui-sortable-handle"> Week 2
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_3" class="ui-sortable-handle"> Week 3
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_4" class="ui-sortable-handle"> Week 4
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_5" class="ui-sortable-handle"> Week 5
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_5" class="ui-sortable-handle"> Day 5</div>

            </div>
          </div>

        </div>
      </div>

    </li>
  </ul>
</div>

Источник

Я считаю, что самый простой способ сделать это - просто добавить идентификатор к родителю (который, как я вижу, у вас уже есть), а затем сообщить детям, кто их родитель, через атрибут данных. Это держит это просто. Возможно, это не будет работать для вас, если вы не имеете видимости на этом уровне кода.

HTML будет что-то вроде:

<input type="checkbox" name="phase" id="phase_cb_1" class='one'> Phase 1
<input type="checkbox" name="week" id="week_cb_1" class='one'> Week 1
<input type="checkbox" name="day" id="day_cb_1" data-parent='week_cb_1' data-parents-class='one'> Day 1

Тогда jquery просто добавит немного к тому, что у вас уже есть:

$("input[type='checkbox']").change(function() {
if ($(this).is(':checked')) {
   $(this).siblings()
     .find("input[type='checkbox']")
     .prop('checked', this.checked);
  } else {
     var parentId = $(this).data('parent');
     $("#"+parentId).prop('checked', this.checked);
     // Or if you want all parents:
     var parentsClasses = $(this).data('parents-classes');
     $("."+parentsClasses).prop('checked', this.checked);
  }
});

Это сняло бы флажок с одного из родителей. Если вы хотите иметь возможность снять отметку с нескольких родителей, вы можете применить ту же логику, но использовать классы вместо идентификаторов... или их комбинацию.

Источник
Другие вопросы по тегам