Question

我有输入复选框的树，需要获取所有选定的值，但如果选择了父级，我需要跳过所有子值。哪种方式最有效呢？

<ul id="tree" class="checktree-root">
    <li>
        <label><input type="checkbox" >Level 1 - 1</label>
    </li>
    <li>
        <label><input type="checkbox">Level 1 - 2</label>
        <ul>
            <li>
                <label><input type="checkbox">Level 2 - 1</label>
                <ul>
                    <li>
                        <label><input type="checkbox">Level 3 - 1</label>
                    </li>
                    <li>
                    <label><input type="checkbox">Level 3 - 2</label>
                        <ul>
                            <li>
                                <label>
                                    <input type="checkbox">Level 4 - 1</label>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <label><input type="checkbox">Level 1 - 4</label>
    </li>
</ul>

Answer 1

DEMO

您可以尝试以下方式：

$(function() {
    $(':checkbox').on('change',function() {
        var chk = $(':checkbox:checked').filter(function() {
            return !$(this).parents('ul').prev('label').find(':input').is(':checked'); 
        }).map(function(i,v) {
            return $(this).parent().text();
        });
        console.log( chk );
    });
});

获取没有子元素的选定输入值

1 个答案: