如何使用jquery获取jquery-bonsai树的选定值?

时间:2016-08-23 12:04:22

标签: javascript jquery

我试图从使用jquery-bonsai创建的树结构中选择(选中)值(链接:http://simonwade.me/jquery-bonsai/

我的代码:

<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>   
    <link rel='stylesheet' type='text/css' href='http://bgagenomics.iicb.res.in/bga/arup/js/assets/svg-icons.css' />
    <link rel='stylesheet' type='text/css' href='http://bgagenomics.iicb.res.in/bga/arup/js/jquery.bonsai.css' />       
    <script src='http://bgagenomics.iicb.res.in/bga/arup/js/jquery.bonsai.js'></script>
    <script src='http://bgagenomics.iicb.res.in/bga/arup/js/jquery.qubit.js'> </script>

    <script>
        jQuery(function() {
            $('#auto-checkboxes').bonsai({
            expandAll: false,
            checkboxes: true, // qbit plung helper
            createInputs: 'checkbox' // enebles auto click data-checked
            });
        });

        $(document).ready(function(){
            $("#val").click(function()
            {
                alert("hello"); //need help here
            });     
});
    </script>
    </head>
    <body>
        <div>
        <ol id='auto-checkboxes' data-name='foo'>
        <li data-value='0'>All
            <ol>
                <li data-value='1'>One</li>
            <li data-value='2' data-id='2'>
                Two
                <ol>
                <li data-name='baz' data-value='3'>
                    Three
                    <ol>
                    <li data-name='baz' data-value='4'>Four</li>
                    </ol>
                </li>
                <li data-value='5'>Five</li>
                </ol>
            </li>
            </ol>
        </li>
        </ol>
    </div>
    <br>
    <input id ="val" type="image" value = "Result" />

    <body>
</html>

上面的代码将创建像

这样的树结构

enter image description here

我希望点击结果时获得选中的值。

解决上述问题的任何帮助或建议都将是一个很大的帮助。

1 个答案:

答案 0 :(得分:1)

您可以通过循环查找所选复选框来获取所有选中复选框的值:

var yourArray = [];//global variable
$(document).ready(function(){
    $("#val").click(function() {
        yourArray = [];//unset previous values
        $("input:checkbox[name=yourCheckboxName]:checked").each(function(){
            yourArray.push($(this).val());
        });
     });     
});