[NMitra]

Здравствуйте, сделала код больше интуитивно

<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>