不能选择所有父元素

Question

我有一个问题，如果我检查了孩子我无法检查所有父元素，只有一个最近的父母，但我需要所有。

在screenshot中你可以看到我检查了＆＃34; child1＆＃34;，＆＃34; Test_2＆＃34;也检查了但是＆＃34;测试＆＃34;没检查过。在另一方面，如果检查＆＃34;测试＆＃34;他所检查的所有孩子都像是一个魅力。

请参阅我的代码：

＆＃13;

＆＃13;

$(document).ready(function() {
    //tree
    var trees = document.querySelectorAll('.tree');
    trees.forEach(function(t) {

        $(t).find('legend').click(function () {
            $(this).closest('fieldset').toggleClass('showtree');
        });

        [].forEach.call(t.querySelectorAll('fieldset'), function(eFieldset) {
            var main = [].filter.call(t.querySelectorAll('[type="checkbox"]'), function(element) {return element.parentNode.nextElementSibling == eFieldset;});

            main.forEach(function(eMain) {
                var l = [].filter.call(eFieldset.querySelectorAll('legend'), function(e) {return e.parentNode == eFieldset;});

                l.forEach(function(eL) {
                    var all = eFieldset.querySelectorAll('[type="checkbox"]');
                    
                    eMain.onclick = function() {
                        for(var i=0; i<all.length; i++) {
                            $(all[i]).prop('indeterminate', false);
                            all[i].checked = this.checked;
                        }
                    }
                    for(var i=0; i<all.length; i++) {
                        all[i].onclick = function() {
                            var flag = 0;
                            $.each(all,function(index, value) {
                                if (value.checked) {
                                    flag++;
                                }
                            });
                            if (flag == all.length) {
                                $(eMain).prop('indeterminate', false);
                                $(eMain).prop('checked', true);
                            } else if (flag > 0) {
                                $(eMain).prop('checked', false);
                                $(eMain).prop('indeterminate', true);
                            } else {
                                $(eMain).prop('checked', false);
                                $(eMain).prop('indeterminate', false);
                            }
                        }
                    }
                });
            });
        });
    });
});

＆＃13;

.tree {
	line-height: normal;
}
.tree label {
	position: relative;
	display: block;
	padding: 0 0 0 1.2em;
	margin: 0;
}
.tree label:not(:nth-last-of-type(1)) {
	border-left: 1px solid #94a5bd;
}
.tree label:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1.1em;
	height: .5em;
	border-bottom: 1px solid #94a5bd;
}
.tree label:nth-last-of-type(1):before {
	border-left: 1px solid #94a5bd;
}
.tree fieldset,
.tree fieldset[class=""] .showtree {
	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0 0 0 2em;
	border: none;
}
.tree fieldset:not(:last-child) {
	border-left: 1px solid #94a5bd;
}
.tree .showtree {
	position: relative;
	visibility: visible;
}
.tree > fieldset > legend,
.tree .showtree > fieldset > legend {
	position: absolute;
	left: -4px;
	top: 4px;
	height: 8px;
	width: 8px;
	margin-top: -1em;
	padding: 0;
	border: 1px solid #94a5bd;
	border-radius: 2px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: #fff;
	background-image: linear-gradient(to left, #1b4964, #1b4964), linear-gradient(#1b4964, #1b4964), linear-gradient(315deg, #a0b6d8, #e8f3ff 60%, #fff 60%);
	background-size: 1px 5px, 5px 1px, 100% 100%;
	visibility: visible;
	cursor: pointer;
}
.tree fieldset[class=""] .showtree fieldset legend {
	visibility: hidden;
}
.tree .showtree > legend {
	background-image: linear-gradient(#1b4964, #1b4964) !important;
	background-size: 5px 1px !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group tree showtree" id="ugpm_tree">
    <label>
        <input type="checkbox" name="ugpm[]" value="17" data-project="17" data-checked="17"> Test</label>
    <fieldset>
        <legend></legend>
        <label>
            <input type="checkbox" name="ugpm[]" value="18" data-project="18" data-checked="18"> Test_2</label>
        <fieldset>
            <legend></legend>
            <label>
                <input type="checkbox" name="ugpm[]" value="15" data-project="15" data-checked="15"> tester-ret</label>
            <fieldset>
                <legend></legend>
                <label>
                    <input type="checkbox" name="ugpm[]" value="21" data-project="21" data-checked="21"> tester2</label>
                <fieldset>
                    <legend></legend>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="20" data-project="20" data-checked="20"> tester1</label>
                    <fieldset>
                        <legend></legend>
                        <label>
                            <input type="checkbox" name="ugpm[]" value="27" data-project="27" data-checked="27"> tester8</label>
                        <fieldset>
                            <legend></legend>
                            <label>
                                <input type="checkbox" name="ugpm[]" value="27-2" data-checked="27-2"> child1</label>
                            <label>
                                <input type="checkbox" name="ugpm[]" value="27-3" data-checked="27-3"> child2</label>
                            <label>
                                <input type="checkbox" name="ugpm[]" value="27-1" data-checked="27-1"> child3</label>
                            <label>
                                <input type="checkbox" name="ugpm[]" value="27-10" data-checked="27-10"> child4</label>
                            <label>
                                <input type="checkbox" name="ugpm[]" value="27-9" data-checked="27-9"> child5</label>
                            <label>
                                <input type="checkbox" name="ugpm[]" value="27-11" data-checked="27-11"> child6</label>
                        </fieldset>
                        <label>
                            <input type="checkbox" name="ugpm[]" value="20-2" data-checked="20-2"> child1</label>
                        <label>
                            <input type="checkbox" name="ugpm[]" value="20-3" data-checked="20-3"> child2</label>
                        <label>
                            <input type="checkbox" name="ugpm[]" value="20-1" data-checked="20-1"> child3</label>
                        <label>
                            <input type="checkbox" name="ugpm[]" value="20-10" data-checked="20-10"> child4</label>
                        <label>
                            <input type="checkbox" name="ugpm[]" value="20-9" data-checked="20-9"> child5</label>
                        <label>
                            <input type="checkbox" name="ugpm[]" value="20-11" data-checked="20-11"> child6</label>
                    </fieldset>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="21-2" data-checked="21-2"> child1</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="21-3" data-checked="21-3"> child2</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="21-1" data-checked="21-1"> child3</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="21-10" data-checked="21-10"> child4</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="21-9" data-checked="21-9"> child5</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="21-11" data-checked="21-11"> child6</label>
                </fieldset>
                <label>
                    <input type="checkbox" name="ugpm[]" value="22" data-project="22" data-checked="22"> tester3</label>
                <fieldset>
                    <legend></legend>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="22-2" data-checked="22-2"> child1</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="22-3" data-checked="22-3"> child2</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="22-1" data-checked="22-1"> child3</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="22-10" data-checked="22-10"> child4</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="22-9" data-checked="22-9"> child5</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="22-11" data-checked="22-11"> child6</label>
                </fieldset>
                <label>
                    <input type="checkbox" name="ugpm[]" value="23" data-project="23" data-checked="23"> tester4</label>
                <fieldset>
                    <legend></legend>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="23-2" data-checked="23-2"> child1</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="23-3" data-checked="23-3"> child2</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="23-1" data-checked="23-1"> child3</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="23-10" data-checked="23-10"> child4</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="23-9" data-checked="23-9"> child5</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="23-11" data-checked="23-11"> child6</label>
                </fieldset>
                <label>
                    <input type="checkbox" name="ugpm[]" value="24" data-project="24" data-checked="24"> tester5</label>
                <fieldset>
                    <legend></legend>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="24-2" data-checked="24-2"> child1</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="24-3" data-checked="24-3"> child2</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="24-1" data-checked="24-1"> child3</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="24-10" data-checked="24-10"> child4</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="24-9" data-checked="24-9"> child5</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="24-11" data-checked="24-11"> child6</label>
                </fieldset>
                <label>
                    <input type="checkbox" name="ugpm[]" value="25" data-project="25" data-checked="25"> tester6</label>
                <fieldset>
                    <legend></legend>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="25-2" data-checked="25-2"> child1</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="25-3" data-checked="25-3"> child2</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="25-1" data-checked="25-1"> child3</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="25-10" data-checked="25-10"> child4</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="25-9" data-checked="25-9"> child5</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="25-11" data-checked="25-11"> child6</label>
                </fieldset>
                <label>
                    <input type="checkbox" name="ugpm[]" value="26" data-project="26" data-checked="26"> tester7</label>
                <fieldset>
                    <legend></legend>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="26-2" data-checked="26-2"> child1</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="26-3" data-checked="26-3"> child2</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="26-1" data-checked="26-1"> child3</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="26-10" data-checked="26-10"> child4</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="26-9" data-checked="26-9"> child5</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="26-11" data-checked="26-11"> child6</label>
                </fieldset>
                <label>
                    <input type="checkbox" name="ugpm[]" value="28" data-project="28" data-checked="28"> tester9</label>
                <fieldset>
                    <legend></legend>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="28-2" data-checked="28-2"> child1</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="28-3" data-checked="28-3"> child2</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="28-1" data-checked="28-1"> child3</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="28-10" data-checked="28-10"> child4</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="28-9" data-checked="28-9"> child5</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="28-11" data-checked="28-11"> child6</label>
                </fieldset>
                <label>
                    <input type="checkbox" name="ugpm[]" value="29" data-project="29" data-checked="29"> tester20</label>
                <fieldset>
                    <legend></legend>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="29-2" data-checked="29-2"> child1</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="29-3" data-checked="29-3"> child2</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="29-1" data-checked="29-1"> child3</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="29-10" data-checked="29-10"> child4</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="29-9" data-checked="29-9"> child5</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="29-11" data-checked="29-11"> child6</label>
                </fieldset>
                <label>
                    <input type="checkbox" name="ugpm[]" value="30" data-project="30" data-checked="30"> MISTER TWISTER</label>
                <fieldset>
                    <legend></legend>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="30-2" data-checked="30-2"> child1</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="30-3" data-checked="30-3"> child2</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="30-1" data-checked="30-1"> child3</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="30-10" data-checked="30-10"> child4</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="30-9" data-checked="30-9"> child5</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="30-11" data-checked="30-11"> child6</label>
                </fieldset>
                <label>
                    <input type="checkbox" name="ugpm[]" value="31" data-project="31" data-checked="31"> tester22</label>
                <fieldset>
                    <legend></legend>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="31-2" data-checked="31-2"> child1</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="31-3" data-checked="31-3"> child2</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="31-1" data-checked="31-1"> child3</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="31-10" data-checked="31-10"> child4</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="31-9" data-checked="31-9"> child5</label>
                    <label>
                        <input type="checkbox" name="ugpm[]" value="31-11" data-checked="31-11"> child6</label>
                </fieldset>
                <label>
                    <input type="checkbox" name="ugpm[]" value="15-2" data-checked="15-2"> child1</label>
                <label>
                    <input type="checkbox" name="ugpm[]" value="15-3" data-checked="15-3"> child2</label>
                <label>
                    <input type="checkbox" name="ugpm[]" value="15-1" data-checked="15-1"> child3</label>
                <label>
                    <input type="checkbox" name="ugpm[]" value="15-10" data-checked="15-10"> child4</label>
                <label>
                    <input type="checkbox" name="ugpm[]" value="15-9" data-checked="15-9"> child5</label>
            </fieldset>
            <label>
                <input type="checkbox" name="ugpm[]" value="18-2" data-checked="18-2"> child1</label>
            <label>
                <input type="checkbox" name="ugpm[]" value="18-3" data-checked="18-3"> child2</label>
            <label>
                <input type="checkbox" name="ugpm[]" value="18-1" data-checked="18-1"> child3</label>
            <label>
                <input type="checkbox" name="ugpm[]" value="18-10" data-checked="18-10"> child4</label>
            <label>
                <input type="checkbox" name="ugpm[]" value="18-9" data-checked="18-9"> child5</label>
            <label>
                <input type="checkbox" name="ugpm[]" value="18-11" data-checked="18-11"> child6</label>
        </fieldset>
        <label>
            <input type="checkbox" name="ugpm[]" value="17-2" data-checked="17-2"> child1</label>
        <label>
            <input type="checkbox" name="ugpm[]" value="17-3" data-checked="17-3"> child2</label>
        <label>
            <input type="checkbox" name="ugpm[]" value="17-1" data-checked="17-1"> child3</label>
        <label>
            <input type="checkbox" name="ugpm[]" value="17-10" data-checked="17-10"> child4</label>
        <label>
            <input type="checkbox" name="ugpm[]" value="17-9" data-checked="17-9"> child5</label>
    </fieldset>
    <label>
        <input type="checkbox" name="ugpm[]" value="19" data-project="19" data-checked="19"> New Test</label>
    <fieldset>
        <legend></legend>
        <label>
            <input type="checkbox" name="ugpm[]" value="19-2" data-checked="19-2"> child1</label>
        <label>
            <input type="checkbox" name="ugpm[]" value="19-3" data-checked="19-3"> child2</label>
        <label>
            <input type="checkbox" name="ugpm[]" value="19-1" data-checked="19-1"> child3</label>
        <label>
            <input type="checkbox" name="ugpm[]" value="19-10" data-checked="19-10"> child4</label>
        <label>
            <input type="checkbox" name="ugpm[]" value="19-9" data-checked="19-9"> child5</label>
    </fieldset>
</div>

＆＃13;

＆＃13;

＆＃13;

P.S。需要使用这个html很重要，只能改变js或css /

Answer 1

$(document).ready(function() {
  //tree
  var trees = document.querySelectorAll('.tree');
  trees.forEach(function(t) {

    $(t).find('legend').click(function() {
      $(this).closest('fieldset').toggleClass('showtree');
    });

    [].forEach.call(t.querySelectorAll('fieldset'), function(eFieldset) {
      var main = [].filter.call(t.querySelectorAll('[type="checkbox"]'), function(element) {
        return element.parentNode.nextElementSibling == eFieldset;
      });

      main.forEach(function(eMain) {
        var l = [].filter.call(eFieldset.querySelectorAll('legend'), function(e) {
          return e.parentNode == eFieldset;
        });

        l.forEach(function(eL) {
          var all = eFieldset.querySelectorAll('[type="checkbox"]');

          eMain.onclick = function() {
            for (var i = 0; i < all.length; i++) {
              $(all[i]).prop('indeterminate', false);
              all[i].checked = this.checked;
            }
          }
          for (var i = 0; i < all.length; i++) {
            all[i].onclick = function() {
              var flag = 0;
              $.each(all, function(index, value) {
                if (value.checked) {
                  flag++;
                }
              });
              if (flag == all.length) {
                $(eMain).prop('indeterminate', false);
                $(eMain).prop('checked', true);
              } else if (flag > 0) {
                $(eMain).prop('checked', false);
                $(eMain).prop('indeterminate', true);
              } else {
                $(eMain).prop('checked', false);
                $(eMain).prop('indeterminate', false);
              }
            }
          }
        });
      });
    });
  });
});

$("body").on("change", "input[type=checkbox]", function() {
  var parents = $(this).parents("fieldset").parents();
  $(parents).each( function() {
    $(this).children("label:first-child").children("input").prop("checked", true);
  });
});

.tree {
  line-height: normal;
}

.tree label {
  position: relative;
  display: block;
  padding: 0 0 0 1.2em;
  margin: 0;
}

.tree label:not(:nth-last-of-type(1)) {
  border-left: 1px solid #94a5bd;
}

.tree label:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.1em;
  height: .5em;
  border-bottom: 1px solid #94a5bd;
}

.tree label:nth-last-of-type(1):before {
  border-left: 1px solid #94a5bd;
}

.tree fieldset,
.tree fieldset[class=""] .showtree {
  position: absolute;
  visibility: hidden;
  margin: 0;
  padding: 0 0 0 2em;
  border: none;
}

.tree fieldset:not(:last-child) {
  border-left: 1px solid #94a5bd;
}

.tree .showtree {
  position: relative;
  visibility: visible;
}

.tree>fieldset>legend,
.tree .showtree>fieldset>legend {
  position: absolute;
  left: -4px;
  top: 4px;
  height: 8px;
  width: 8px;
  margin-top: -1em;
  padding: 0;
  border: 1px solid #94a5bd;
  border-radius: 2px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-color: #fff;
  background-image: linear-gradient(to left, #1b4964, #1b4964), linear-gradient(#1b4964, #1b4964), linear-gradient(315deg, #a0b6d8, #e8f3ff 60%, #fff 60%);
  background-size: 1px 5px, 5px 1px, 100% 100%;
  visibility: visible;
  cursor: pointer;
}

.tree fieldset[class=""] .showtree fieldset legend {
  visibility: hidden;
}

.tree .showtree>legend {
  background-image: linear-gradient(#1b4964, #1b4964) !important;
  background-size: 5px 1px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group tree showtree" id="ugpm_tree">
  <label>
        <input type="checkbox" name="ugpm[]" value="17" data-project="17" data-checked="17"> Test</label>
  <fieldset>
    <legend></legend>
    <label>
            <input type="checkbox" name="ugpm[]" value="18" data-project="18" data-checked="18"> Test_2</label>
    <fieldset>
      <legend></legend>
      <label>
                <input type="checkbox" name="ugpm[]" value="15" data-project="15" data-checked="15"> tester-ret</label>
      <fieldset>
        <legend></legend>
        <label>
                    <input type="checkbox" name="ugpm[]" value="21" data-project="21" data-checked="21"> tester2</label>
        <fieldset>
          <legend></legend>
          <label>
                        <input type="checkbox" name="ugpm[]" value="20" data-project="20" data-checked="20"> tester1</label>
          <fieldset>
            <legend></legend>
            <label>
                            <input type="checkbox" name="ugpm[]" value="27" data-project="27" data-checked="27"> tester8</label>
            <fieldset>
              <legend></legend>
              <label>
                                <input type="checkbox" name="ugpm[]" value="27-2" data-checked="27-2"> child1</label>
              <label>
                                <input type="checkbox" name="ugpm[]" value="27-3" data-checked="27-3"> child2</label>
              <label>
                                <input type="checkbox" name="ugpm[]" value="27-1" data-checked="27-1"> child3</label>
              <label>
                                <input type="checkbox" name="ugpm[]" value="27-10" data-checked="27-10"> child4</label>
              <label>
                                <input type="checkbox" name="ugpm[]" value="27-9" data-checked="27-9"> child5</label>
              <label>
                                <input type="checkbox" name="ugpm[]" value="27-11" data-checked="27-11"> child6</label>
            </fieldset>
            <label>
                            <input type="checkbox" name="ugpm[]" value="20-2" data-checked="20-2"> child1</label>
            <label>
                            <input type="checkbox" name="ugpm[]" value="20-3" data-checked="20-3"> child2</label>
            <label>
                            <input type="checkbox" name="ugpm[]" value="20-1" data-checked="20-1"> child3</label>
            <label>
                            <input type="checkbox" name="ugpm[]" value="20-10" data-checked="20-10"> child4</label>
            <label>
                            <input type="checkbox" name="ugpm[]" value="20-9" data-checked="20-9"> child5</label>
            <label>
                            <input type="checkbox" name="ugpm[]" value="20-11" data-checked="20-11"> child6</label>
          </fieldset>
          <label>
                        <input type="checkbox" name="ugpm[]" value="21-2" data-checked="21-2"> child1</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="21-3" data-checked="21-3"> child2</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="21-1" data-checked="21-1"> child3</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="21-10" data-checked="21-10"> child4</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="21-9" data-checked="21-9"> child5</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="21-11" data-checked="21-11"> child6</label>
        </fieldset>
        <label>
                    <input type="checkbox" name="ugpm[]" value="22" data-project="22" data-checked="22"> tester3</label>
        <fieldset>
          <legend></legend>
          <label>
                        <input type="checkbox" name="ugpm[]" value="22-2" data-checked="22-2"> child1</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="22-3" data-checked="22-3"> child2</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="22-1" data-checked="22-1"> child3</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="22-10" data-checked="22-10"> child4</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="22-9" data-checked="22-9"> child5</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="22-11" data-checked="22-11"> child6</label>
        </fieldset>
        <label>
                    <input type="checkbox" name="ugpm[]" value="23" data-project="23" data-checked="23"> tester4</label>
        <fieldset>
          <legend></legend>
          <label>
                        <input type="checkbox" name="ugpm[]" value="23-2" data-checked="23-2"> child1</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="23-3" data-checked="23-3"> child2</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="23-1" data-checked="23-1"> child3</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="23-10" data-checked="23-10"> child4</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="23-9" data-checked="23-9"> child5</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="23-11" data-checked="23-11"> child6</label>
        </fieldset>
        <label>
                    <input type="checkbox" name="ugpm[]" value="24" data-project="24" data-checked="24"> tester5</label>
        <fieldset>
          <legend></legend>
          <label>
                        <input type="checkbox" name="ugpm[]" value="24-2" data-checked="24-2"> child1</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="24-3" data-checked="24-3"> child2</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="24-1" data-checked="24-1"> child3</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="24-10" data-checked="24-10"> child4</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="24-9" data-checked="24-9"> child5</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="24-11" data-checked="24-11"> child6</label>
        </fieldset>
        <label>
                    <input type="checkbox" name="ugpm[]" value="25" data-project="25" data-checked="25"> tester6</label>
        <fieldset>
          <legend></legend>
          <label>
                        <input type="checkbox" name="ugpm[]" value="25-2" data-checked="25-2"> child1</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="25-3" data-checked="25-3"> child2</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="25-1" data-checked="25-1"> child3</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="25-10" data-checked="25-10"> child4</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="25-9" data-checked="25-9"> child5</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="25-11" data-checked="25-11"> child6</label>
        </fieldset>
        <label>
                    <input type="checkbox" name="ugpm[]" value="26" data-project="26" data-checked="26"> tester7</label>
        <fieldset>
          <legend></legend>
          <label>
                        <input type="checkbox" name="ugpm[]" value="26-2" data-checked="26-2"> child1</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="26-3" data-checked="26-3"> child2</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="26-1" data-checked="26-1"> child3</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="26-10" data-checked="26-10"> child4</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="26-9" data-checked="26-9"> child5</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="26-11" data-checked="26-11"> child6</label>
        </fieldset>
        <label>
                    <input type="checkbox" name="ugpm[]" value="28" data-project="28" data-checked="28"> tester9</label>
        <fieldset>
          <legend></legend>
          <label>
                        <input type="checkbox" name="ugpm[]" value="28-2" data-checked="28-2"> child1</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="28-3" data-checked="28-3"> child2</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="28-1" data-checked="28-1"> child3</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="28-10" data-checked="28-10"> child4</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="28-9" data-checked="28-9"> child5</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="28-11" data-checked="28-11"> child6</label>
        </fieldset>
        <label>
                    <input type="checkbox" name="ugpm[]" value="29" data-project="29" data-checked="29"> tester20</label>
        <fieldset>
          <legend></legend>
          <label>
                        <input type="checkbox" name="ugpm[]" value="29-2" data-checked="29-2"> child1</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="29-3" data-checked="29-3"> child2</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="29-1" data-checked="29-1"> child3</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="29-10" data-checked="29-10"> child4</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="29-9" data-checked="29-9"> child5</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="29-11" data-checked="29-11"> child6</label>
        </fieldset>
        <label>
                    <input type="checkbox" name="ugpm[]" value="30" data-project="30" data-checked="30"> MISTER TWISTER</label>
        <fieldset>
          <legend></legend>
          <label>
                        <input type="checkbox" name="ugpm[]" value="30-2" data-checked="30-2"> child1</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="30-3" data-checked="30-3"> child2</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="30-1" data-checked="30-1"> child3</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="30-10" data-checked="30-10"> child4</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="30-9" data-checked="30-9"> child5</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="30-11" data-checked="30-11"> child6</label>
        </fieldset>
        <label>
                    <input type="checkbox" name="ugpm[]" value="31" data-project="31" data-checked="31"> tester22</label>
        <fieldset>
          <legend></legend>
          <label>
                        <input type="checkbox" name="ugpm[]" value="31-2" data-checked="31-2"> child1</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="31-3" data-checked="31-3"> child2</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="31-1" data-checked="31-1"> child3</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="31-10" data-checked="31-10"> child4</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="31-9" data-checked="31-9"> child5</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="31-11" data-checked="31-11"> child6</label>
        </fieldset>
        <label>
                    <input type="checkbox" name="ugpm[]" value="15-2" data-checked="15-2"> child1</label>
        <label>
                    <input type="checkbox" name="ugpm[]" value="15-3" data-checked="15-3"> child2</label>
        <label>
                    <input type="checkbox" name="ugpm[]" value="15-1" data-checked="15-1"> child3</label>
        <label>
                    <input type="checkbox" name="ugpm[]" value="15-10" data-checked="15-10"> child4</label>
        <label>
                    <input type="checkbox" name="ugpm[]" value="15-9" data-checked="15-9"> child5</label>
      </fieldset>
      <label>
                <input type="checkbox" name="ugpm[]" value="18-2" data-checked="18-2"> child1</label>
      <label>
                <input type="checkbox" name="ugpm[]" value="18-3" data-checked="18-3"> child2</label>
      <label>
                <input type="checkbox" name="ugpm[]" value="18-1" data-checked="18-1"> child3</label>
      <label>
                <input type="checkbox" name="ugpm[]" value="18-10" data-checked="18-10"> child4</label>
      <label>
                <input type="checkbox" name="ugpm[]" value="18-9" data-checked="18-9"> child5</label>
      <label>
                <input type="checkbox" name="ugpm[]" value="18-11" data-checked="18-11"> child6</label>
    </fieldset>
    <label>
            <input type="checkbox" name="ugpm[]" value="17-2" data-checked="17-2"> child1</label>
    <label>
            <input type="checkbox" name="ugpm[]" value="17-3" data-checked="17-3"> child2</label>
    <label>
            <input type="checkbox" name="ugpm[]" value="17-1" data-checked="17-1"> child3</label>
    <label>
            <input type="checkbox" name="ugpm[]" value="17-10" data-checked="17-10"> child4</label>
    <label>
            <input type="checkbox" name="ugpm[]" value="17-9" data-checked="17-9"> child5</label>
  </fieldset>
  <label>
        <input type="checkbox" name="ugpm[]" value="19" data-project="19" data-checked="19"> New Test</label>
  <fieldset>
    <legend></legend>
    <label>
            <input type="checkbox" name="ugpm[]" value="19-2" data-checked="19-2"> child1</label>
    <label>
            <input type="checkbox" name="ugpm[]" value="19-3" data-checked="19-3"> child2</label>
    <label>
            <input type="checkbox" name="ugpm[]" value="19-1" data-checked="19-1"> child3</label>
    <label>
            <input type="checkbox" name="ugpm[]" value="19-10" data-checked="19-10"> child4</label>
    <label>
            <input type="checkbox" name="ugpm[]" value="19-9" data-checked="19-9"> child5</label>
  </fieldset>
</div>

Answer 2

我改变了所有的JavaScript，但HTML都是一样的。

// find all the siblings
function FindSiblings($this) {
  var $siblings = $this.parents('fieldset:first').find(' > label input')
  return $siblings
}

// find all the childs and check or uncheck them
function FindChilds($this) {
  var checked = $this.is(':checked')
  var $childs = $this.parent('label').next('fieldset:first').find('label input')
  $childs.prop('checked', checked)
  $childs.prop('indeterminate', false);
}

// find parent and calculate siblings' checked numbers to determine if parent is checked, indeterminate or nothing.
// iterate through all parent
function FindParent($this) {
  var $parent = $this.parents('fieldset:first').prev('label').find('input')
  var $siblings = FindSiblings($this)

  var siblingsLength = $siblings.length
  var checkSiblings = 0
  $.each($siblings, (index, ele) => {
    if ($(ele).is(':checked') || $(ele).prop('indeterminate')) {
      checkSiblings++;
    }
  })

  if (siblingsLength == checkSiblings) {
    $parent.prop('checked', true);
    $parent.prop('indeterminate', false);
  } else if (checkSiblings == 0) {
    $parent.prop('checked', false);
    $parent.prop('indeterminate', false);
  } else {
    $parent.prop('checked', false);
    $parent.prop('indeterminate', true);
  }

  if ($parent.length > 0) {
    FindParent($parent)
  }
}

$(document).ready(function() {

  $('legend').on('click', function() {
    $(this).closest('fieldset').toggleClass('showtree');
  })

  $('input').on('change', function() {
    var $this = $(this)
    FindChilds($this)
    FindParent($this)
  })
});

.tree {
  line-height: normal;
}

.tree label {
  position: relative;
  display: block;
  padding: 0 0 0 1.2em;
  margin: 0;
}

.tree label:not(:nth-last-of-type(1)) {
  border-left: 1px solid #94a5bd;
}

.tree label:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.1em;
  height: .5em;
  border-bottom: 1px solid #94a5bd;
}

.tree label:nth-last-of-type(1):before {
  border-left: 1px solid #94a5bd;
}

.tree fieldset,
.tree fieldset[class=""] .showtree {
  position: absolute;
  visibility: hidden;
  margin: 0;
  padding: 0 0 0 2em;
  border: none;
}

.tree fieldset:not(:last-child) {
  border-left: 1px solid #94a5bd;
}

.tree .showtree {
  position: relative;
  visibility: visible;
}

.tree>fieldset>legend,
.tree .showtree>fieldset>legend {
  position: absolute;
  left: -4px;
  top: 4px;
  height: 8px;
  width: 8px;
  margin-top: -1em;
  padding: 0;
  border: 1px solid #94a5bd;
  border-radius: 2px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-color: #fff;
  background-image: linear-gradient(to left, #1b4964, #1b4964), linear-gradient(#1b4964, #1b4964), linear-gradient(315deg, #a0b6d8, #e8f3ff 60%, #fff 60%);
  background-size: 1px 5px, 5px 1px, 100% 100%;
  visibility: visible;
  cursor: pointer;
}

.tree fieldset[class=""] .showtree fieldset legend {
  visibility: hidden;
}

.tree .showtree>legend {
  background-image: linear-gradient(#1b4964, #1b4964) !important;
  background-size: 5px 1px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group tree showtree" id="ugpm_tree">
  <label>
        <input type="checkbox" name="ugpm[]" value="17" data-project="17" data-checked="17"> Test</label>
  <fieldset>
    <legend></legend>
    <label>
            <input type="checkbox" name="ugpm[]" value="18" data-project="18" data-checked="18"> Test_2</label>
    <fieldset>
      <legend></legend>
      <label>
                <input type="checkbox" name="ugpm[]" value="15" data-project="15" data-checked="15"> tester-ret</label>
      <fieldset>
        <legend></legend>
        <label>
                    <input type="checkbox" name="ugpm[]" value="21" data-project="21" data-checked="21"> tester2</label>
        <fieldset>
          <legend></legend>
          <label>
                        <input type="checkbox" name="ugpm[]" value="20" data-project="20" data-checked="20"> tester1</label>
          <fieldset>
            <legend></legend>
            <label>
                            <input type="checkbox" name="ugpm[]" value="27" data-project="27" data-checked="27"> tester8</label>
            <fieldset>
              <legend></legend>
              <label>
                                <input type="checkbox" name="ugpm[]" value="27-2" data-checked="27-2"> child1</label>
              <label>
                                <input type="checkbox" name="ugpm[]" value="27-3" data-checked="27-3"> child2</label>
              <label>
                                <input type="checkbox" name="ugpm[]" value="27-1" data-checked="27-1"> child3</label>
              <label>
                                <input type="checkbox" name="ugpm[]" value="27-10" data-checked="27-10"> child4</label>
              <label>
                                <input type="checkbox" name="ugpm[]" value="27-9" data-checked="27-9"> child5</label>
              <label>
                                <input type="checkbox" name="ugpm[]" value="27-11" data-checked="27-11"> child6</label>
            </fieldset>
            <label>
                            <input type="checkbox" name="ugpm[]" value="20-2" data-checked="20-2"> child1</label>
            <label>
                            <input type="checkbox" name="ugpm[]" value="20-3" data-checked="20-3"> child2</label>
            <label>
                            <input type="checkbox" name="ugpm[]" value="20-1" data-checked="20-1"> child3</label>
            <label>
                            <input type="checkbox" name="ugpm[]" value="20-10" data-checked="20-10"> child4</label>
            <label>
                            <input type="checkbox" name="ugpm[]" value="20-9" data-checked="20-9"> child5</label>
            <label>
                            <input type="checkbox" name="ugpm[]" value="20-11" data-checked="20-11"> child6</label>
          </fieldset>
          <label>
                        <input type="checkbox" name="ugpm[]" value="21-2" data-checked="21-2"> child1</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="21-3" data-checked="21-3"> child2</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="21-1" data-checked="21-1"> child3</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="21-10" data-checked="21-10"> child4</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="21-9" data-checked="21-9"> child5</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="21-11" data-checked="21-11"> child6</label>
        </fieldset>
        <label>
                    <input type="checkbox" name="ugpm[]" value="22" data-project="22" data-checked="22"> tester3</label>
        <fieldset>
          <legend></legend>
          <label>
                        <input type="checkbox" name="ugpm[]" value="22-2" data-checked="22-2"> child1</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="22-3" data-checked="22-3"> child2</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="22-1" data-checked="22-1"> child3</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="22-10" data-checked="22-10"> child4</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="22-9" data-checked="22-9"> child5</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="22-11" data-checked="22-11"> child6</label>
        </fieldset>
        <label>
                    <input type="checkbox" name="ugpm[]" value="23" data-project="23" data-checked="23"> tester4</label>
        <fieldset>
          <legend></legend>
          <label>
                        <input type="checkbox" name="ugpm[]" value="23-2" data-checked="23-2"> child1</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="23-3" data-checked="23-3"> child2</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="23-1" data-checked="23-1"> child3</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="23-10" data-checked="23-10"> child4</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="23-9" data-checked="23-9"> child5</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="23-11" data-checked="23-11"> child6</label>
        </fieldset>
        <label>
                    <input type="checkbox" name="ugpm[]" value="24" data-project="24" data-checked="24"> tester5</label>
        <fieldset>
          <legend></legend>
          <label>
                        <input type="checkbox" name="ugpm[]" value="24-2" data-checked="24-2"> child1</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="24-3" data-checked="24-3"> child2</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="24-1" data-checked="24-1"> child3</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="24-10" data-checked="24-10"> child4</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="24-9" data-checked="24-9"> child5</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="24-11" data-checked="24-11"> child6</label>
        </fieldset>
        <label>
                    <input type="checkbox" name="ugpm[]" value="25" data-project="25" data-checked="25"> tester6</label>
        <fieldset>
          <legend></legend>
          <label>
                        <input type="checkbox" name="ugpm[]" value="25-2" data-checked="25-2"> child1</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="25-3" data-checked="25-3"> child2</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="25-1" data-checked="25-1"> child3</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="25-10" data-checked="25-10"> child4</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="25-9" data-checked="25-9"> child5</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="25-11" data-checked="25-11"> child6</label>
        </fieldset>
        <label>
                    <input type="checkbox" name="ugpm[]" value="26" data-project="26" data-checked="26"> tester7</label>
        <fieldset>
          <legend></legend>
          <label>
                        <input type="checkbox" name="ugpm[]" value="26-2" data-checked="26-2"> child1</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="26-3" data-checked="26-3"> child2</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="26-1" data-checked="26-1"> child3</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="26-10" data-checked="26-10"> child4</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="26-9" data-checked="26-9"> child5</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="26-11" data-checked="26-11"> child6</label>
        </fieldset>
        <label>
                    <input type="checkbox" name="ugpm[]" value="28" data-project="28" data-checked="28"> tester9</label>
        <fieldset>
          <legend></legend>
          <label>
                        <input type="checkbox" name="ugpm[]" value="28-2" data-checked="28-2"> child1</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="28-3" data-checked="28-3"> child2</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="28-1" data-checked="28-1"> child3</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="28-10" data-checked="28-10"> child4</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="28-9" data-checked="28-9"> child5</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="28-11" data-checked="28-11"> child6</label>
        </fieldset>
        <label>
                    <input type="checkbox" name="ugpm[]" value="29" data-project="29" data-checked="29"> tester20</label>
        <fieldset>
          <legend></legend>
          <label>
                        <input type="checkbox" name="ugpm[]" value="29-2" data-checked="29-2"> child1</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="29-3" data-checked="29-3"> child2</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="29-1" data-checked="29-1"> child3</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="29-10" data-checked="29-10"> child4</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="29-9" data-checked="29-9"> child5</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="29-11" data-checked="29-11"> child6</label>
        </fieldset>
        <label>
                    <input type="checkbox" name="ugpm[]" value="30" data-project="30" data-checked="30"> MISTER TWISTER</label>
        <fieldset>
          <legend></legend>
          <label>
                        <input type="checkbox" name="ugpm[]" value="30-2" data-checked="30-2"> child1</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="30-3" data-checked="30-3"> child2</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="30-1" data-checked="30-1"> child3</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="30-10" data-checked="30-10"> child4</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="30-9" data-checked="30-9"> child5</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="30-11" data-checked="30-11"> child6</label>
        </fieldset>
        <label>
                    <input type="checkbox" name="ugpm[]" value="31" data-project="31" data-checked="31"> tester22</label>
        <fieldset>
          <legend></legend>
          <label>
                        <input type="checkbox" name="ugpm[]" value="31-2" data-checked="31-2"> child1</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="31-3" data-checked="31-3"> child2</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="31-1" data-checked="31-1"> child3</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="31-10" data-checked="31-10"> child4</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="31-9" data-checked="31-9"> child5</label>
          <label>
                        <input type="checkbox" name="ugpm[]" value="31-11" data-checked="31-11"> child6</label>
        </fieldset>
        <label>
                    <input type="checkbox" name="ugpm[]" value="15-2" data-checked="15-2"> child1</label>
        <label>
                    <input type="checkbox" name="ugpm[]" value="15-3" data-checked="15-3"> child2</label>
        <label>
                    <input type="checkbox" name="ugpm[]" value="15-1" data-checked="15-1"> child3</label>
        <label>
                    <input type="checkbox" name="ugpm[]" value="15-10" data-checked="15-10"> child4</label>
        <label>
                    <input type="checkbox" name="ugpm[]" value="15-9" data-checked="15-9"> child5</label>
      </fieldset>
      <label>
                <input type="checkbox" name="ugpm[]" value="18-2" data-checked="18-2"> child1</label>
      <label>
                <input type="checkbox" name="ugpm[]" value="18-3" data-checked="18-3"> child2</label>
      <label>
                <input type="checkbox" name="ugpm[]" value="18-1" data-checked="18-1"> child3</label>
      <label>
                <input type="checkbox" name="ugpm[]" value="18-10" data-checked="18-10"> child4</label>
      <label>
                <input type="checkbox" name="ugpm[]" value="18-9" data-checked="18-9"> child5</label>
      <label>
                <input type="checkbox" name="ugpm[]" value="18-11" data-checked="18-11"> child6</label>
    </fieldset>
    <label>
            <input type="checkbox" name="ugpm[]" value="17-2" data-checked="17-2"> child1</label>
    <label>
            <input type="checkbox" name="ugpm[]" value="17-3" data-checked="17-3"> child2</label>
    <label>
            <input type="checkbox" name="ugpm[]" value="17-1" data-checked="17-1"> child3</label>
    <label>
            <input type="checkbox" name="ugpm[]" value="17-10" data-checked="17-10"> child4</label>
    <label>
            <input type="checkbox" name="ugpm[]" value="17-9" data-checked="17-9"> child5</label>
  </fieldset>
  <label>
        <input type="checkbox" name="ugpm[]" value="19" data-project="19" data-checked="19"> New Test</label>
  <fieldset>
    <legend></legend>
    <label>
            <input type="checkbox" name="ugpm[]" value="19-2" data-checked="19-2"> child1</label>
    <label>
            <input type="checkbox" name="ugpm[]" value="19-3" data-checked="19-3"> child2</label>
    <label>
            <input type="checkbox" name="ugpm[]" value="19-1" data-checked="19-1"> child3</label>
    <label>
            <input type="checkbox" name="ugpm[]" value="19-10" data-checked="19-10"> child4</label>
    <label>
            <input type="checkbox" name="ugpm[]" value="19-9" data-checked="19-9"> child5</label>
  </fieldset>
</div>