jQuery Select 所有复选框；当 child 复选框未选中时取消选择 parent

jQuery Select All Checkbox; Deselect parent when child checkbox unchecked

我创建了一个 JSFiddle。查看它时，选中 parent，您会看到 children 已 selected。理想情况下，当 child 被取消 select 时，我希望 parent 变为未选中状态，这可能是一个或两个 parent，具体取决于是什么deselected（parent 将充当 select 全部用于其下方的 children）。

由于嵌套，我不确定完成任务的最佳方法。

$("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);
});

我也试过了，但它也取消选中了所有 same-level 项：

$("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);
  }
});

我发现最简单的方法是向 parent 添加一个 ID（我看到你已经有了），然后让 children 知道他们的 parent 是通过数据属性。它保持简单。如果您在代码的那个级别没有可见性，则可能不适合您。

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);
  }
});

这将取消选中单个 parent。如果您希望能够取消选中多个 parent，您可以应用相同的逻辑，但使用 类 而不是 ids... 或两者的组合。

编辑：根据评论，使用递归函数可以解决问题。

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>