У меня проблема: когда я выбираю дочерний элемент, только ближайший родитель выбирается тоже, а мне нужно, чтобы выбирались все родители.
На скриншоте видно как я выбираю "child1", "Test_2" выбирается тоже, но "Test" не выбирается. Причем в обратную сторону все работает: выбираю "Test", и все дочерние элементы также выбираются.
Вот мой код:
$(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);
}
}
}
});
});
});
});
});
.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>
P.S. Нужно не изменять html, изменять можно только js и css
l.forEach(function(eL) {
var all = eFieldset.querySelectorAll('[type="checkbox"]');
eMain.onclick = function() {
Сколько элементов в l?
Сборка персонального компьютера от Artline: умный выбор для современных пользователей