Check all uncheck all and invert checkboxes using jquery
On 03.15.10, In jquery, by Steve
To check all and uncheck all checkboxes using jquery is real fun. I tried making for my current project and shared with you for simple copy and paste elements.
.
Check DEMO before going on.
Step 1: Html setup
Let us assume that you have following checkboxes and controls.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
Check All or
Invert Selection
Checkbox 1
Checkbox 2
Checkbox 3
Checkbox 4
Checkbox 5
Checkbox 6
Checkbox 7
Checkbox 8
Checkbox 9
Checkbox 10
|
.
Step 2: Jquery
Copy following code inside head tag of your html. (jquery included)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$( 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' );
}); });
|
.
All done.. Check DEMO
Cheers!
