jQuery checkbox manipulation

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

You can easily add a class to these sub checkboxes in ASP.net, and then iterate over them using $('.className').

Answer 2

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.

Answer 3

This will make is so when you check "Bla" all "+ Bla *" will get checked:

$('label:not(:contains(+))').prev(':checkbox').click(function(){
    var $this = $(this);
    $('label:contains("'+$this.next('label').text()+'")').prev(':checkbox')
    .attr('checked',$this.is(':checked'));
});