jQuery实现树形控件带选择

可以使用jQuery插件jstree来实现树形控件带选择功能。

首先，需要在HTML中引入jQuery和jstree的相关文件：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.11/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.11/jstree.min.js"></script>

然后，在HTML中添加一个空的div，用于显示树形结构：

<div id="tree"></div>

接下来，使用jQuery和jstree插件初始化树形结构：

$('#tree').jstree({
    'core': {
        'data': [
            {
                "text": "节点1",
                "children": [
                    {
                        "text": "子节点1"
                    },
                    {
                        "text": "子节点2"
                    }
                ]
            },
            {
                "text": "节点2",
                "children": [
                    {
                        "text": "子节点3"
                    },
                    {
                        "text": "子节点4"
                    }
                ]
            }
        ]
    },
    'checkbox': {
        'keep_selected_style': false
    },
    'plugins': ['checkbox']
});

上述代码中，core.data表示树形结构的数据，checkbox表示添加选择框，plugins.checkbox表示使用选择框插件。

最后，可以使用以下代码获取所有选中的节点：

var selectedNodes = $('#tree').jstree(true).get_selected();

其中，get_selected()方法返回一个数组，包含所有选中节点的ID。