При выборе дочернего элемента не все родители выбираются

265
21 апреля 2018, 18:32

У меня проблема: когда я выбираю дочерний элемент, только ближайший родитель выбирается тоже, а мне нужно, чтобы выбирались все родители.

На скриншоте видно как я выбираю "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

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

Сколько элементов в l?

READ ALSO
Что в скрипте не так?

Что в скрипте не так?

Скрипт работает, но анимация лагает жестко, особенно на слабых ноутахЗнакомый подсказал, что each каждый раз использовать не нужно, не понимаю...

185
Баг или нет? Input с маленьким font-size

Баг или нет? Input с маленьким font-size

Столкнулся с неожиданностью в ChromeЕсли создать <input> с font-size от 0 до 0

181
Как отпилить в строке ненужную длину символов

Как отпилить в строке ненужную длину символов

Результат вывода программы "ЗАШИФРОВАТЬ ЗАШИФРОВАТЬСТРОКУ ЗАШИФРОВАТЬСТРОКУМЕТОДОМ ЗАШИФРОВАТЬСТРОКУМЕТОДОМВИЖЕНЕРА" не знаю как обрезать...

178