CodePen Embed - Checkbox selection test 2

<div class="labCheckPropertyFormElementWrapper">
  <div class="card-body">
    <div class="row mt-2">
      <ul class="treeview">
        <li class="labCheckGroupWrapper">
          <button type="button" class="plus active"><i>&plus;</i><b>&minus;</b></button>
          <input type="checkbox" class="showAllCheckbox" id="1" autocomplete="off">
          <label class="custom-indeterminate">
          Food
          <span class="text textSizeStandard alignRight frequencyWrapper hidden text required" id="lblPropertyForm_ModuleFrequency" style="display: inline-block;">Frequency</span>
          <select class=" textBox textSizeSmall frequencyWrapper mr-2 ml-2 hidden formElement" data-required="true" data-val="true" data-val-number="The field LabCheckGroupFrequencyId must be a number." id="ddlNewLabCheckGroupFrequency" name="LabCheckSampleTypeGroups[0].LabCheckGroupFrequencyId" style="display:inline-block;">
            <option value=""></option>
            <option value="1">Monthly</option>
            <option value="2">Every 2 Months</option>
            <option value="3">Quarterly</option>
          </select>
          </label>
          <ul>
            <li><button type="button" class="plus active"><i>&plus;</i><b>&minus;</b></button>
              <input type="checkbox" id="1" autocomplete="off">
              <label class="custom-indeterminate">Chicken</label>
              <ul>
                <li>
                  <input class="  formElement check-box" data-required="false" data-val="true" data-val-required="The IsEnabled field is required." htmlattributes="{ }" id="LabCheckSampleTypeGroups_0__LabCheckSampleTypes_0__LabCheckSampleTests_0__IsEnabled" name="LabCheckSampleTypeGroups[0].LabCheckSampleTypes[0].LabCheckSampleTests[0].IsEnabled"
                    type="checkbox" value="true" autocomplete="off" checked>
                  <input name="LabCheckSampleTypeGroups[0].LabCheckSampleTypes[0].LabCheckSampleTests[0].IsEnabled" type="hidden" value="false" autocomplete="off">
                  <label class="custom-checked">Count of Salmonella organisms</label>
                </li>
                <li>
                  <input class="  formElement check-box" data-required="false" data-val="true" data-val-required="The IsEnabled field is required." htmlattributes="{ }" id="LabCheckSampleTypeGroups_0__LabCheckSampleTypes_0__LabCheckSampleTests_1__IsEnabled" name="LabCheckSampleTypeGroups[0].LabCheckSampleTypes[0].LabCheckSampleTests[1].IsEnabled"
                    type="checkbox" value="true" autocomplete="off">
                  <input name="LabCheckSampleTypeGroups[0].LabCheckSampleTypes[0].LabCheckSampleTests[1].IsEnabled" type="hidden" value="false" autocomplete="off">
                  <label class="custom-unchecked">Temperature of display food</label>
                </li>
              </ul>
            </li>
            <li>
              <button type="button" class="plus"><i>&plus;</i><b>&minus;</b></button>
              <input type="checkbox" id="2" autocomplete="off">
              <label class="custom-unchecked">Beef</label>
              <ul>
                <li>
                  <input class="  formElement check-box" data-required="false" data-val="true" data-val-required="The IsEnabled field is required." htmlattributes="{ }" id="LabCheckSampleTypeGroups_0__LabCheckSampleTypes_1__LabCheckSampleTests_0__IsEnabled" name="LabCheckSampleTypeGroups[0].LabCheckSampleTypes[1].LabCheckSampleTests[0].IsEnabled"
                    type="checkbox" value="true" autocomplete="off">
                  <input name="LabCheckSampleTypeGroups[0].LabCheckSampleTypes[1].LabCheckSampleTests[0].IsEnabled" type="hidden" value="false" autocomplete="off">
                  <label class="custom-unchecked">Temperature of display food</label>
                </li>
                <li>
                  <input class="  formElement check-box" data-required="false" data-val="true" data-val-required="The IsEnabled field is required." htmlattributes="{ }" id="LabCheckSampleTypeGroups_0__LabCheckSampleTypes_1__LabCheckSampleTests_1__IsEnabled" name="LabCheckSampleTypeGroups[0].LabCheckSampleTypes[1].LabCheckSampleTests[1].IsEnabled"
                    type="checkbox" value="true" autocomplete="off">
                  <input name="LabCheckSampleTypeGroups[0].LabCheckSampleTypes[1].LabCheckSampleTests[1].IsEnabled" type="hidden" value="false" autocomplete="off">
                  <label class="custom-unchecked">Count of bacteria organisms</label>
                </li>
              </ul>
            </li>
            <li>
              <button type="button" class="plus"><i>&plus;</i><b>&minus;</b></button>
              <input type="checkbox" id="3" autocomplete="off">
              <label class="custom-unchecked">Swimming Pool Water</label>
              <ul>
                <li>
                  <input class="  formElement check-box" data-required="false" data-val="true" data-val-required="The IsEnabled field is required." htmlattributes="{ }" id="LabCheckSampleTypeGroups_0__LabCheckSampleTypes_2__LabCheckSampleTests_0__IsEnabled" name="LabCheckSampleTypeGroups[0].LabCheckSampleTypes[2].LabCheckSampleTests[0].IsEnabled"
                    type="checkbox" value="true" autocomplete="off">
                  <input name="LabCheckSampleTypeGroups[0].LabCheckSampleTypes[2].LabCheckSampleTests[0].IsEnabled" type="hidden" value="false" autocomplete="off">
                  <label class="custom-unchecked">PH level</label>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="labCheckGroupWrapper">
          <button type="button" class="plus"><i>&plus;</i><b>&minus;</b></button>
          <input type="checkbox" class="showAllCheckbox" id="2" autocomplete="off">
          <label class="custom-unchecked">
          Swimming Pool
          <span class="text textSizeStandard alignRight frequencyWrapper hidden text required" id="lblPropertyForm_ModuleFrequency">Frequency</span>
          <select class=" textBox textSizeSmall frequencyWrapper mr-2 ml-2 hidden formElement" data-required="true" data-val="true" data-val-number="The field LabCheckGroupFrequencyId must be a number." id="ddlNewLabCheckGroupFrequency" name="LabCheckSampleTypeGroups[1].LabCheckGroupFrequencyId">
            <option value=""></option>
            <option value="1">Monthly</option>
            <option value="2">Every 2 Months</option>
            <option value="3">Quarterly</option>
          </select>
          </label>
          <ul>
            <li>
              <input type="checkbox" id="3" autocomplete="off">
              <label class="custom-unchecked">Swimming Pool Water</label>
              <ul>
                <li>
                  <input class="  formElement check-box" data-required="false" data-val="true" data-val-required="The IsEnabled field is required." htmlattributes="{ }" id="LabCheckSampleTypeGroups_1__LabCheckSampleTypes_0__LabCheckSampleTests_0__IsEnabled" name="LabCheckSampleTypeGroups[1].LabCheckSampleTypes[0].LabCheckSampleTests[0].IsEnabled"
                    type="checkbox" value="true" autocomplete="off">
                  <input name="LabCheckSampleTypeGroups[1].LabCheckSampleTypes[0].LabCheckSampleTests[0].IsEnabled" type="hidden" value="false" autocomplete="off">
                  <label class="custom-unchecked">PH level</label>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

.treeview {
  position: relative;
  margin: 1rem 0 1rem 1rem;
  padding: 0;
}
ul,
.treeview {
  list-style-type: none;
  text-align: left;
}
.treeview ul {
  list-style-type: none;
  margin: 0 0 10px 1rem;
  padding: 0;
  position: relative;
}
.showAllCheckbox {
  margin: 0 0 1.125em 0;
}
.text {
  display: block;
}
/*
.treeview .custom-checked{
	margin-right: 1.25em;
}
*/
.treeview .custom-checked .frequencyWrapper {
  margin-top: -0.25em;
}
.hidden {
  display: none;
}

/* plus sign etc */
.plus {
  font-weight: bold;
  font-size: 1rem;
  display: flex;
  width: 0.8rem;
  height: 0.8rem;
  line-height: 0.8rem;
  overflow: hidden;
  margin: 0.1rem 0 0 -1.1rem;
  text-align: center;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  padding: 0;
  border: none;
  background: none;
}
.plus i {
  font-style: normal;
  flex: 1 0 100%;
}
.plus b {
  display: none;
  flex: 1 0 100%;
}
.plus.active b {
  display: block;
}
.plus.active i {
  display: none;
}

.plus ~ ul {
  display: none;
}
.plus + input[type="checkbox"] {
  display: none;
}
.plus.active ~ ul {
  display: block;
}
.plus.active + input[type="checkbox"] {
  display: inline-block;
}

.showAllCheckbox:checked ~ ul input[type="checkbox"] {
  display: inline-block;
}
.showAllCheckbox:checked ~ ul ul {
  display: block;
}
.showAllCheckbox:checked ~ ul .plus {
  display: none;
}

.custom-indeterminate ~ ul ul {
  display: block;
}
.custom-indeterminate ~ ul .plus {
  display: none;
}

.plus:focus {
  background: #f9f9f9;
  outline: 1px solid #ccc;
}

$(".labCheckGroupWrapper")
  .find('input[type="checkbox"]')
  .each(function() {
    $(this)
      .unbind("change")
      .change(function() {
        var checked = $(this).prop("checked");
        var container = $(this).parent();

        container
          .find('input[type="checkbox"]')
          .prop({
            indeterminate: false,
            checked: checked
          })
          .siblings("label")
          .removeClass("custom-checked custom-unchecked custom-indeterminate")
          .addClass(checked ? "custom-checked" : "custom-unchecked");

        var numberOfChecked = $(this)
          .closest(".labCheckGroupWrapper")
          .find(".custom-checked").length;

        if (numberOfChecked > 0) {
          $(this)
            .closest(".labCheckGroupWrapper")
            .find(".frequencyWrapper")
            .show();
        } else {
          $(this)
            .closest(".labCheckGroupWrapper")
            .find(".frequencyWrapper")
            .hide();
        }

        checkSiblings(container, checked);
      });
  });

function checkSiblings($el, checked) {
  var parent = $el.parent().parent();
  var all = true;

  $el.siblings().each(function() {
    return (all =
      $(this)
        .children('input[type="checkbox"]')
        .prop("checked") === checked);
  });

  if (all && checked) {
    parent.children('input[type="checkbox"]').each(function() {
      SetCheckBoxProps(
        $(this),
        false,
        checked,
        checked ? "custom-checked" : "custom-unchecked"
      );
    });
    checkSiblings(parent, checked);
  } else if (all && !checked) {
    var indeterminate =
      parent.find('input[type="checkbox"]:checked').length > 0;
    var labelClass = indeterminate
      ? "custom-indeterminate"
      : checked ? "custom-checked" : "custom-unchecked";

    parent.children('input[type="checkbox"]').each(function() {
      SetCheckBoxProps($(this), indeterminate, checked, labelClass);
    });

    checkSiblings(parent, checked);
  } else {
    $el
      .parents("li")
      .children('input[type="checkbox"]')
      .each(function() {
        SetCheckBoxProps($(this), true, false, "custom-indeterminate");
      });
  }
}

function SetCheckBoxProps($checkbox, indeterminate, checked, labelClass) {
  $checkbox
    .prop({
      indeterminate: indeterminate,
      checked: checked
    })
    .siblings("label")
    .removeClass("custom-checked custom-unchecked custom-indeterminate")
    .addClass(labelClass);
}

// plus minus toggle
$(document.body).on("click", ".plus", function(event) {
  $(this).toggleClass("active");
});

Run Pen

This Pen is owned by Paul O'Brien on CodePen.

See more by @paulobrien on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js