каскадная проверка с вложенными флажками


1 принят

Проблема заключалась в том, что оператор $(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>

JavaScript, JQuery, HTML,

javascript,jquery,html,

0

Ответов: 1


1 принят

Проблема заключалась в том, что оператор $(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>

JavaScript, JQuery, HTML,
Похожие вопросы