如何从jQuery复选框树中获取选定的节点项

How to get the selected node items from jQuery checkbox tree

本文关键字:节点 获取 jQuery 复选框      更新时间:2023-09-26

我使用jQuery生成复选框树,无法从树列表中获取选中的节点。请帮我一下。

这是我的代码:-

<script type="text/javascript">
    //<!--
    $(document).ready(function() {
        $('#tabs').tabs({
            cookie: { expires: 30 }
        });
        $('.jquery').each(function() {
            eval($(this).html());
        });
        $('.button').button();
    });
    //-->
</script>

jQuery checkboxTree插件演示

项目主页
<code class="jquery" lang="text/javascript">
    $('#tree1').checkboxTree({
    initializeUnchecked: 'collapsed',
    collapse: function(){
            alert('collapse event triggered (passed as option)');
    },
    expand: function(){
            alert('expand event triggered (passed as option)');
    },
    check: function(n){
           alert('Hi there!!!'+n);
    },
    uncheck: function(n){
            alert('Hi there!!!'+n);
    }
    });
</code>
<ul id="tree1">
    <li><input type="checkbox"><label>Node 1</label>
        <ul>
            <li><input type="checkbox"><label>Node 1.1</label>
                <ul>
                    <li><input type="checkbox"><label>Node 1.1.1</label>
                </ul>
        </ul>
        <ul>
            <li><input type="checkbox"><label>Node 1.2</label>
                <ul>
                    <li><input type="checkbox"><label>Node 1.2.1</label>
                    <li><input type="checkbox"><label>Node 1.2.2</label>
                    <li><input type="checkbox"><label>Node 1.2.3</label>
                        <ul>
                            <li><input type="checkbox"><label>Node 1.2.3.1</label>
                            <li><input type="checkbox"><label>Node 1.2.3.2</label>
                        </ul>
                    <li><input type="checkbox"><label>Node 1.2.4</label>
                    <li><input type="checkbox"><label>Node 1.2.5</label>
                    <li><input type="checkbox"><label>Node 1.2.6</label>
                </ul>
        </ul>
    <li><input type="checkbox"><label>Node 2</label>
        <ul>
            <li><input type="checkbox"><label>Node 2.1</label>
                <ul>
                    <li><input type="checkbox"><label>Node 2.1.1</label>
                </ul>
            <li><input type="checkbox"><label>Node 2.2</label>
                <ul>
                    <li><input type="checkbox"><label>Node 2.2.1</label>
                    <li><input type="checkbox"><label>Node 2.2.2</label>
                    <li><input type="checkbox"><label>Node 2.2.3</label>
                        <ul>
                            <li><input type="checkbox"><label>Node 2.2.3.1</label>
                            <li><input type="checkbox"><label>Node 2.2.3.2</label>
                        </ul>
                    <li><input type="checkbox"><label>Node 2.2.4</label>
                    <li><input type="checkbox"><label>Node 2.2.5</label>
                    <li><input type="checkbox"><label>Node 2.2.6</label>
                </ul>
        </ul>
</ul>

请帮我一下。

您应该能够使用:checked选择器。以下内容应返回tree1元素中的所有复选框。

var checkedCheckboxes = $('#tree1 input[type="checkbox"]:checked');