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