jQuery Select All Checkbox; Deselect parent when child checkbox unchecked

Question

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

Not sure if usable for you, but I usually get around this by assigning a specific class or ID to the parent, then set the id key to the child in a data attribute. When clicking the child, if it has a parent, pull the data and then you have a selector to uncheck. — Watercayman, Jan 06 '19 at 23:23
Normally that’s the approach I’d take too but with the nesting, it creates a different challenge and I think traversing the DOM will be needed. — HPWD, Jan 06 '19 at 23:46
I understand. Not possible to use classes? This would allow for each level of nesting if each child had the parent class as a data attrib. (maybe :) — Watercayman, Jan 06 '19 at 23:48
Interesting. Classes _might_ be possible. I'll play with the fiddle and try some things out... — HPWD, Jan 06 '19 at 23:50
I added a possible class way to the answer below. Might be helpful if this logic fits your direction. — Watercayman, Jan 06 '19 at 23:54
I figured out why the siblings would lose their checks, because the parent is changing which is triggering a “change” event so the siblings lose their check marks. hope that makes sense. — HPWD, Jan 07 '19 at 00:25
Ouch. Been there too before. Gets ugly! But, jquery *shouldn't* trigger the change event for inputs (https://stackoverflow.com/questions/4200358/jquery-detect-programatic-change-to-field). If it does, I've gotten into some pretty convoluted code to check for it (in the change function, add a boolean value when changing programatically, then check for it, etc. Also selective use of trigger may help). The bad news, I think, is that this behavior will happen regardless of using classes, id, or dom. — Watercayman, Jan 07 '19 at 00:47

Watercayman · Answer 1 · 2019-01-06T23:53:07.370

I find the easiest way to do this is to just add an ID to the parent (which I see you already have) and then let the children know who their parent is via a data attribute. It keeps it simple. Might not be workable for you if you don't have visibility at that level of the code though.

The html would be something like:

<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

Then the jquery would just add a little to what you already have:

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

This would uncheck a single parent. If you wanted to be able to uncheck multiple parents, you can apply the same logic, but use classes instead of ids... or a combination of both.

Hikarunomemory · Accepted Answer · 2019-01-07T03:05:07.370

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>

I agree, `.find()` does seem to be an issue in a modified fiddle I'm working with. Your jsFiddle is doing exactly what I'm looking for. Reviewing your solution more closely now. — HPWD, Jan 07 '19 at 01:54
Extremely close. If Phase 1 is checked, the children are all checked (good); if Week 1 (under Phase 1) is UNchecked, then Phase 1 becomes unchecked (good); If Day 3 is UNchecked (under Phase 1 > Week 1), then Week 1 and Phase 1 are UNchecked (good). if Phase 1 is checked, and then UNchecked, the children are not unchecked (not good). — HPWD, Jan 07 '19 at 02:00
Same condition should apply to Week. If a Week is unchecked, the Days beneath it should then become UNchecked as well as it's parent. — HPWD, Jan 07 '19 at 02:01
May the functions need to be separated out, one for handling parents and one for children? — HPWD, Jan 07 '19 at 02:03
in the JavaScript, can you explain the `let checked = $parent.find(checkbox).length === $parent.find(`${checkbox}:checked`).length;` part? I don't know if it's a formatting issue or shortcut syntax or something else tripping me up here. To me, it seems to be doing the same thing. — HPWD, Jan 07 '19 at 02:51
I added some comments that explain how it works. Let me know if you have any questions. — Hikarunomemory, Jan 07 '19 at 03:08
The back ticks threw me off. Thanks for the clarification and comments. — HPWD, Jan 07 '19 at 03:15
I'm working in Sublime Text 3 and am using uglifyjs to minimize the JS file. The parser doesn't support es6 and along with it the backticks (this is a reported issue https://github.com/mishoo/UglifyJS2/issues/950). Can this be done without the template string? — HPWD, Jan 07 '19 at 03:39
Of course. Use `checkbox+":checked"` instead of the template string. — Hikarunomemory, Jan 07 '19 at 03:42

jQuery Select All Checkbox; Deselect parent when child checkbox unchecked

2 Answers2