Multiselect treeview of checkboxes on a mobile device?

Question

What is the best way of implementing something like this on a mobile device?

Which is an example of a multiselect dropdown box with a hierachy implemented in JQuery UI: http://jsfiddle.net/3jr2v/2/embedded/result/

From here: https://stackoverflow.com/questions/8781905/jquery-multiselect-nested-option

I am using JQuery Mobile.

My requirements are:

• Around 5-30 checkboxes, depending on scenario
• Hierarchy that may be multiple levels deep (5?), and then the ability to deselect all children by clicking on the parent
• Doesn't make sense to use a 'autofill' 'autocomplete' control anywhere, as the user will not have any prior knowledge of what the options are

Some problems:

• If the checkboxes aren't nested in an accordion style, then it might end up being a really really long list of checkboxes
• If it is split into lists of checkboxes on different pages, how can I easily see a global view of everything that is selected? Is this too much effort?

I don't mind what the solution is, it doesn't have to be a single dropdown, it could be separate lists, pages... obviously screen real estate is at a premium. Anyone attempted something like this on a mobile device, or knows of any good examples?

Previous research:

• Another way of doing multi-select on mobile other than check boxes?
• tree-view for mobile devices
• For large hierarchies - checkbox tree or 'guided tree construction'
• Multi Select hierarchy for Mobile Design
• File manager on a mobile device
• What UI Should I Use?
• Multiselect for narrow display

Answer 1

I will go for such a solution.

If there is nested elements - give a visual cue.

If not - bypass

Hope that it helps.