Question

I have a list of checkboxes, looking like this:

<table>
 <tr><td><input type="checkbox" /> <label>Bla</label></td></tr>
 <tr><td><input type="checkbox" /> <label> + Bla Sub 1</label></td></tr>
 <tr><td><input type="checkbox" /> <label> + Bla Sub 2</label></td></tr>
 <tr><td><input type="checkbox" /> <label> + Bla Sub 3</label></td></tr>
 <tr><td><input type="checkbox" /> <label> + Bla Sub 4</label></td></tr>
 <tr><td><input type="checkbox" /> <label> + Bla Sub 5</label></td></tr>
 <tr><td><input type="checkbox" /> <label> + Bla Sub 6</label></td></tr>
 <tr><td><input type="checkbox" /> <label> Blub</label></td></tr>
 <tr><td><input type="checkbox" /> <label> + Blub Sub 1</label></td></tr>
 <tr><td><input type="checkbox" /> <label> + Blub Sub 2</label></td></tr>
 <tr><td><input type="checkbox" /> <label> + Blub Sub 3</label></td></tr>
 <tr><td><input type="checkbox" /> <label> + Blub Sub 4</label></td></tr>
 <tr><td><input type="checkbox" /> <label> Derp</label></td></tr>
 <tr><td><input type="checkbox" /> <label> etc...</label></td></tr>
</table>

So, I want to enable a “select sub categories” function to such a list. Unfortunately to ASP.NET’s messed up ID-rendering, I cant call the categories by their IDs or Names, so I’d have to read out the contents of each node and un/select all check boxes that start with +.

So, if the user selects Bla, all sublists + Bla Sub # should also be selected, and vise versa.

How is this possible? I use jQuery, so it shouldn’t be that hard, but I can’t quite get a start on how to check the lists contents…

Answer 1

This should work:

$('ul li:not(:contains("+"))').click(function(
 var current = $(this), check;
 check = (current.attr('checked') ^ true);
 $('ul li:contains("'+current.text()+'") checkbox').attr('checked',check);
}

I haven’t tested it though. It certainly should give you an idea of what is required. Comment if you’ve any questions at all.