jqueryjquery-traversing

jQuery Select All Checkbox; Deselect parent when child checkbox unchecked


I've created a JSFiddle. When viewing it, check a parent and you'll see the children are selected. Ideally, when a child is deselected, I'd like for the parents to become unchecked, this could be one or two parents depending on what was deselected (the parent are to act as a select all for the children beneath it).

I'm not sure of the best way to do to accomplish due to the nesting.

$("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>

I've included the JS code below but to get the full picture, please visit the JSFiddle.

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

I also tried this but it unchecks all the same-level items as well:

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

Solution

  • Edit: As per the comment, use a recursive function would solve the problem.

    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>