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


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
<div class="controls">
	<span><input type="checkbox" class="checkAll" /> <b>Check All</b> <span> or 
	<span><a href="javascript:void(0);" class="invertSelection">Invert Selection</a></span>
</div>
<div class="elements">
	<span><input type="checkbox" class="cb-element" /> Checkbox 1</span>
	<span><input type="checkbox" class="cb-element" /> Checkbox 2</span>
	<span><input type="checkbox" class="cb-element" /> Checkbox 3</span>
	<span><input type="checkbox" class="cb-element" /> Checkbox 4</span>
	<span><input type="checkbox" class="cb-element" /> Checkbox 5</span>
	<span><input type="checkbox" class="cb-element" /> Checkbox 6</span>
	<span><input type="checkbox" class="cb-element" /> Checkbox 7</span>
	<span><input type="checkbox" class="cb-element" /> Checkbox 8</span>
	<span><input type="checkbox" class="cb-element" /> Checkbox 9</span>
	<span><input type="checkbox" class="cb-element" /> Checkbox 10</span>
</div>

.

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
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js" language="javascript"></script>
	<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>

.

All done.. Check DEMO

Cheers!

Recently Published

»

Why is Link Building So Important? Read this to understand

Getting a high ranking on search engine results is important to the ...

»

Productivity Tips for Web Developers for Efficient Time Management

The world is full of distractions. Whether you are a work-from-home, ...

»

The Importance of a Good Domain Name

The right domain name can genuinely make or break a business – ...

»

Cloud Strategy of Oracle: Working or Not?

Though Oracle considered cloud strategy as gibberish long before, it ...

»

Some Excellent SEO Tools for Boosting SEO Rankings like Never Before

You could be having a really great-looking website and the niftiest ...

»

How to Promote Your Business by Collecting Instagram Followers – Part 2

Promoting business is not an easy task these days with so many ...

»

Using Instagram to Optimize Your Business – Unfolding the Tricks – Part 1

Instagram is one of the most popular social networking communities ...

»

6 Mobile UX Design Techniques that work

In software development, be it a mobile app or a website, creating ...

»

Importance of website design in online branding

“A brand for a company is like a reputation for a person. You earn ...