Tree structure with Check boxes in JQuery Mobile

Question

Is it possible to have a tree structure with check boxes in JQuery MObile. I did not find any thing in demos.

I wanted something similar this image: Is there any alternative way we can achieve this?

Answer 1

Well it's just a concept but I have a couple working examples:

• http://jsfiddle.net/JYn53/2/
• http://jsfiddle.net/JYn53/4/

HTML

<div data-role="page"> 
    <div data-role="content">
        <div data-role="collapsible" data-collapsed="true"> 
            <h3>
                <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" /> 
                <label for="checkbox-1a">Cheetos</label> 
            </h3> 
            <p>
                <div  data-role="fieldcontain"> 
                     <fieldset data-role="controlgroup"> 
                        <legend>Choose as many snacks as you'd like:</legend> 
                        <input type="checkbox" name="checkbox-1aa" id="checkbox-1aa" class="custom" /> 
                        <label for="checkbox-1aa">Cheetos</label> 

                        <input type="checkbox" name="checkbox-2aa" id="checkbox-2aa" class="custom" /> 
                        <label for="checkbox-2aa">Doritos</label> 

                        <input type="checkbox" name="checkbox-3aa" id="checkbox-3aa" class="custom" /> 
                        <label for="checkbox-3aa">Fritos</label> 

                        <input type="checkbox" name="checkbox-4aa" id="checkbox-4aa" class="custom" /> 
                        <label for="checkbox-4aa">Sun Chips</label> 
                    </fieldset> 
                </div> 
            </p> 
        </div>
    </div>
</div>