在子菜单中找到选中的复选框

Question

这是三级菜单我希望在第三级找到Checked CheckBox。我为复选复选框写了函数但是没有工作。我可以这样做吗？

http://jsfiddle.net/LvsYc/7353/

  <div class="tree"> <ul>
                    <li class='Root'>
                        <input type='checkbox'/><a href='#' name="Ar">First part</a>
                        <ul>
                            <li class='Root'>
                                <a id='6' href='#'><input type='checkbox' />Second part</a>
                                <ul class='SubRoot' >
                                    <li><input id='1' type='checkbox' />Third part</li>
                                    <li><input id='2' type='checkbox' />Third part</li>
                                </ul>
                                </li>
                            <li class='Root'><a id='7' href='#'><input type='checkbox' />Second part</a>
                                <ul class='SubRoot'>
                                    <li><input id='1' type='checkbox' />Third part</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                     <li class='Root'>
                        <input type='checkbox'/><a href='#' name="Ar">First part</a>
                        <ul>
                            <li class='Root'>
                                <a id='6' href='#'><input type='checkbox' />Second part</a>
                                <ul class='SubRoot' >
                                    <li><input id='1' type='checkbox' />Third part</li>
                                </ul>
                                </li>
                        </ul>
                    </li>
    </ul> </div

            var listPart = [];
            $('.tree >ul>li input:checked').each(function () {
                var A1 = this.id;
                listPart.push(A1);
            });

Answer 1

存在一些问题，请阅读代码中的注释以了解它们。

＆＃13;

＆＃13;

function check() {
  var listPart = [];
  var listSec = [];
  var listTA = [];
  $('.tree >ul>li input:checked').each(function () {
    var A1 = this.id;
    listPart.push(A1);

    var Sec = $(this).closest('ul').parent().find('a').attr('id');
    listSec.push(Sec);

    var parentModule = $(this).closest('ul').parent().closest('ul').parent().find('a').attr(/* id - need to replace the `name` */'name');
    listTA.push(parentModule);
  });

  // show the result
  $('#console').html('<p>' + JSON.stringify(listPart) + ',' + JSON.stringify(listSec) + ',' + JSON.stringify(listTA) + '</p>');
}

// run the function whenever checkbox was changed
$(':checkbox').change(check);  

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- you forgot the .tree element -->
<div class="tree">
    <ul>
        <li class='Root'>
            <input type='checkbox' /><a href='#' name="Ar">First part</a>
            <ul>
                <li class='Root'>
                    <a id='6' href='#'>
                        <input type='checkbox' />Second part</a>
                    <ul class='SubRoot'>
                        <li>
                            <input id='1' type='checkbox' />Third part</li>
                        <li>
                            <input id='2' type='checkbox' />Third part</li>
                    </ul>
                </li>
                <li class='Root'><a id='7' href='#'>
                    <input type='checkbox' />Second part</a>
                    <ul class='SubRoot'>
                        <li>
                            <input id='1' type='checkbox' />Third part</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class='Root'>
            <input type='checkbox' /><a href='#' name="Ar">First part</a>
            <ul>
                <li class='Root'>
                    <a id='6' href='#'>
                        <input type='checkbox' />Second part</a>
                    <ul class='SubRoot'>
                        <li>
                            <input id='1' type='checkbox' />Third part</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
<!-- show the result -->
<div id="console"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用此选择器：

$(".SubRoot input[type='checkbox']:checked");

Example JSFiddle

Answer 3

您可以使用以下选择器在第三级找到选中的复选框...

$('.tree>ul>li>ul>li>ul>li>input[type="checkbox"]:checked')