Проблема заключалась в том, что оператор $(this).parents("ul").prev("a").find("input:checkbox")пересекает dom сверху вниз, т. Е. От самого верхнего ul до самого низкого. Вам нужно это в обратном порядке, чтобы исключить все родительские флажки.
Обращаясь к объекту jquery, полученному из цикла $(this).parents("ul").prev("a").find("input:checkbox")и используя его each, получается желаемый результат.
Пример, который вы включили, работал так, как он использует, prevкоторый проходит сверху вниз, в то время как вы используете findэтот траверс сверху вниз
Изменен ваш код для работы следующим образом:
jQuery.fn.reverse = [].reverse;
$("input:checkbox").click(function()
{
var isChecked = $(this).is(":checked");
//down
$(this).parent().next().find("input:checkbox").prop("checked", isChecked);
//up
$(this).parents("ul").prev("a").find("input:checkbox").reverse().each(function(a, b) {
$(b).prop("checked", function()
{
return $(b).parent("a").next("ul").find(":checked").length;
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A1</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A2</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3a</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3b</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3b1</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3b2</span>
</a>
<ul></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE B</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE C</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE C1</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE C2</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE C2a</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE C2b</span>
</a>
<ul></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>