Здравствуйте, сделала код больше интуитивно
<ul class="shest2">
<li>1<input type="checkbox">
<li>2<input type="checkbox">
<ul class="shest2">
<li>2.1<input type="checkbox">
<ul>
<li>2.1.1<input type="checkbox">
<li>2.1.2<input type="checkbox">
</ul>
<li>2.2<input type="checkbox">
</ul>
<li>3<input type="checkbox">
</ul>
<script>
var ul = [].filter.call(document.querySelectorAll(".shest2"), function(element) {return element.tagName === "UL";});
ul.forEach(function(elementUl) {
var li = [].filter.call(elementUl.querySelectorAll("li"), function(element) {return element.parentNode == elementUl;});
li.forEach(function(elementLi) {
var main = elementLi.querySelector('[type="checkbox"]'),
all = elementLi.querySelectorAll('ul > li > [type="checkbox"]');
for(var i=0; i<all.length; i++)
all[i].onclick = function() {
var allChecked = elementLi.querySelectorAll('ul > li > [type="checkbox"]:checked').length;
main.checked = allChecked == all.length;
main.indeterminate = allChecked > 0 && allChecked < all.length;
}
main.onclick = function() {
for(var i=0; i<all.length; i++)
all[i].checked = this.checked;
}
});
});
</script>
По нему можно опускаться. То есть если нажать 2, то будут выделены
2.1
2.1.1
2.1.2
2.2
А вот подниматься проблематично. Если нажать
2.1.1
2.1.2
то не будет галочки на 2.1
Если нажать 2.2 и 2.1, то не будет галки на 2
Попробовала пойти другим путём, но получилось только с одним уровнем и как-со совсем плохо
<form name="Tree">
<input type="checkbox"><ul>
<li><input type="checkbox">
<li><input type="checkbox">
<li><input type="checkbox">
</ul>
</form>
<script>
var t = document.forms.Tree;
var All = [].filter.call(t.querySelectorAll('[type="checkbox"]'), function(e) {return e;});
All.forEach(function(eAll) {
var Main = eAll.parentNode.parentNode.previousSibling;
t.onchange = function() {
if ([].every.call(document.querySelectorAll('[name="Tree"] > ul > li > [type="checkbox"]'), function(e) {return e.checked == true;})) {
Main.checked = true;
} else {
Main.checked = false;
}
}
});
</script>
Но вроде рабочий.
