How To: Check all uncheck all and invert checkboxes using jquery

By /

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!

Scroll to Top