How to get the selected node items from jQuery checkbox tree

Question

I am using jQuery to generate the checkbox tree, I am not able to get the checked node from tree list. Please help me on this.

Here is my code:-

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

jQuery checkboxTree plugin demo

Project Home

<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>

Please do help me on this.

First, get rid of that eval(). it's evil and WILL kick your dog for no reason. — Marc B
– Marc B, Commented Feb 23, 2012 at 16:35

mcNux · Accepted Answer · 2012-02-23 16:42:11Z

1

You should just be able to use the :checked selector. The following should return any checked checkboxes in the tree1 element.

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

answered Feb 23, 2012 at 16:42

mcNux

1,5211 gold badge15 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pruthviraj Over a year ago

Hi mcNux, Thanks a lot for your valuable help, could you please tell me how should i display particular checkbox name using "checkedCheckboxes" ? i tried using checkedCheckboxes.id and checkedCheckboxes.value but both were not working.

mcNux Over a year ago

I suggest you refer to jQuery documention as everything you need to know is on there. You will need to understand Selectors and the attr() method to achieve what you want.

Collectives™ on Stack Overflow

How to get the selected node items from jQuery checkbox tree

jQuery checkboxTree plugin demo

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

jQuery checkboxTree plugin demo

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related