Help with Check all uncheck all and invert checkboxes using jquery
With the help of google and a lot of searching forums I have managed to construct a dynamically created table with several collapsible sections and I am trying to use jQuery to enable the user to check the topic within each section and automatically select the subtopics within that particular section.
I found the following code and the functionality of the checking and unchecking is working but I need to append an id to checkAll and cb-element so I could have checkAll1 and cb-element1 for the first section and checkAll2 and cb-element2 for the second section etc…etc…etc.
-
<script type="text/javascript" language="javascript">
$( function() {
$( '.checkAll' ).live( 'change', function() {
$( '.cb-element' ).attr( 'checked', $( this ).is( ':checked' ) ? 'checked' : '' );
$( this ).next().text( $( this ).is( ':checked' ) ? 'Uncheck All' : 'Check All' );
});
$( '.invertSelection' ).live( 'click', function() {
$( '.cb-element' ).each( function() {
$( this ).attr( 'checked', $( this ).is( ':checked' ) ? '' : 'checked' );
}).trigger( 'change' );
});
$( '.cb-element' ).live( 'change', function() {
$( '.cb-element' ).length == $( '.cb-element:checked' ).length ? $( '.checkAll' ).attr( 'checked', 'checked' ).next().text( 'Uncheck All' ) : $( '.checkAll' ).attr( 'checked', '' ).next().text( 'Check All' );
});
});
</script>
I have created id’s pretty much everywhere and I realize I may have gone a little crazy but I can’t seem to understand how to append the id either from the table row or the checkbox itself.
Here is an excerpt from the table.
-
<table id="topics" width=700>
-
<thead>
<tr class="parent">
<th>SUBJECT</th>
<th>QUESTIONS</th>
<th>SELECT</th>
</tr>
</thead>
-
<tbody>
<tr class="parent" id="1">
<th colspan="1"><strong>TOPIC 1</strong></th>
<th>0</th>
<th><input name="" type="checkbox" class="checkAll1" id="1" value="" />
</th>
</tr>
<tr class="child-1">
<td>SUB-TOPIC 1</td>
<td>0</td>
<td><input name="" type="checkbox" class="cb-element1" id="1" value="" /></td>
</tr>
<tr class="child-1">
<td>SUB-TOPIC 2</td>
<td>0</td>
<td><input name="" type="checkbox" class="cb-element1" id="1" value="" /></td>
</tr>
<tr class="child-1">
<td>SUB-TOPIC 3</td>
<td>0</td>
<td><input name="" type="checkbox" class="cb-element1" id="1" value="" /></td>
</tr>
</tbody>
-
<tbody>
<tr class="parent" id="2">
<th colspan="1"><strong>TOPIC 2</strong></th>
<th>0</th>
<th><input name="" type="checkbox" class="checkAll2" id="2" value="" /></th>
</tr>
<tr class="child-2">
<td>SUB-TOPIC 1</td>
<td>0</td>
<td><input name="" type="checkbox" class="cb-element2" id="2" value="" /></td>
</tr>
<tr class="child-2">
<td>SUB-TOIC 2</td>
<td>0</td>
<td><input name="" type="checkbox" class="cb-element2" id="2" value="" /></td>
</tr>
</tbody>
-
</table>
Can anybody help me?