INNOVATIVEPHP

FOUNDATION TO INNOVATIVE WEB APPLICATION DEVELOPMENT

Jquery Checkbox Examples in Code by nimeshrmr

This code snippet will show you how to manipulate checkboxes using jquery.

Jquery Checkbox Examples Overview

Get checked checkboxes Get unchecked checkboxes Get checkboxes inside specific container Check all checkboxes Uncheck all checkboxes Validate checkbox is checked Toggle checkbox Highlight Table row on check checkbox Demo and Download

Get checked checkboxes

Contents

Loops through all the checked checkboxes and adds checkbox value to an array using jquery :checkbox selector.

1 2 3 4 5

$( ":checkbox:checked" ).each( function () { $(this).val(); } );

Get unchecked checkboxes

Loops through all the unchecked checkboxes and adds checkbox value to an array.

Contents

1 2 3 4 5

$( ":checkbox" ).not(:checked).each( function () { $(this).val(); } );

);

Get checkboxes inside specific container

Contents

Loops through all the checkboxes inside given container(Ex:div) and adds checkbox value to an array.

1 2 3 4 5

$( "div :checkbox" ).each( function () { $(this).val(); } );

Check all checkboxes

Loops through all the checkboxes and marks all the checkboxes as checked using jquery loop.

Contents

1 2 3 4 5

$( ":checkbox" ).each( function () { $(this).attr( 'checked' , true); } );

Uncheck all checkboxes

Loops through all the checkboxes and marks all the checkboxes as unchecked.

Contents

1 2 3 4 5

$( ":checkbox" ).each( function () { $(this).attr( 'checked' , false); } );

Validate checkbox is checked

Checks if a given checkbox is checked.

Contents

1 2 3

if ($( '#checkboxid' ).is( ':checked' )) { alert($( '#checkboxid' ).val()); }

Toggle checkbox
Toggles the display of a container based on checkbox select.

Contents

< input type = "checkbox" id = "toggleCheck" name = "togglebox"

1 2 3 4 1 2 3

< input type = "checkbox" id = "toggleCheck" name = "togglebox" value = "value1" > < div id = "toggleDiv" > This is the content of toggle div. </ div > $( '#toggleCheck' ).change( function (){ $( '#toggleDiv' ).toggle(); });

Highlight Table row on check checkbox

Contents

Create a table with a checkbox for each row. Table row will be highlighted when checkbox is checked.

1 2 3 4 5 6 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

.tabledata{ background-color : #cfcfcf ; } .highlighttabledata{ background-color : #f00 ; } < div id = "tableCon" > < table > < tbody >< tr > < td > </ td > < td >Name</ td > </ tr > < tr id = "tr1" > < td > < input type = "checkbox" class = "tabledata" id = "chk1" name = "names" value = "Mark" ></ td > < td >Mark</ td > </ tr > < tr id = "tr2" > < td > < input type = "checkbox" class = "tabledata" id = "chk2" name = "names" value = "Smith" ></ td > < td >Smith</ td > </ tr > < tr id = "tr3" > < td > < input type = "checkbox" class = "tabledata" id = "chk3" name = "names" value = "John" ></ td > < td >John</ td > </ tr > < tr id = "tr4" > < td > < input type = "checkbox" class = "tabledata" id = "chk4" name = "names"

24 25 26 27 28 29 30 31 32 1 2 3 4 5 6 7 8

< input type = "checkbox" class = "tabledata" id = "chk4" name = "names" value = "Adams" ></ td > < td >Adams</ td > </ tr > < tr id = "tr5" > < td > < input type = "checkbox" class = "tabledata" id = "chk5" name = "names" value = "James" ></ td > < td >James</ td > </ tr > </ tbody ></ table ></ div > // Highlight Table row on check checkbox $( '.tabledata' ).change( function (){ var id = $( this ).attr( 'id' ); var rowId = "#" +id.replace( "chk" , "tr" ); $(rowId).toggleClass( "highlighttabledata" ); });

Demo and Download

Contents

Download Jquery Checkbox Examples Jquery Checkbox Examples Demo

SIGN UP FOR UPDATES

As a Web Developer or Blogger you might not get enough time to visit your favorite web sites frequently. So make sure to use one of the following 2 options to subscribe to InnovativePHP and avoid the risk of missing important stuff.

Subscribe To RSS

Subscribe To Email

Popular Posts Creating Word Cloud Widget Using Google Visualization API Jquery Featured Page Content Slider Plugin Tutorial For Beginners

Recent Posts

Crop Images using PHP GD Library and Jquery Resize Discover the Meaning of Asynchronous Request using Jquery Ajax Set and Get Codeigniter Session Variables in Controllers and Custom Classes Jquery Checkbox Examples

Download article as PDF

InnovativePhp Blog is proudly powered by WordPress and BuddyPress