P. 1
Jquery Checkbox Examples

Jquery Checkbox Examples

|Views: 436|Likes:
Published by Rakhitha Nimesh
This document will show you how to work with checkboxes using jquery practical examples. Checkbox validation, checking and uncheking and more examples are provided.
This document will show you how to work with checkboxes using jquery practical examples. Checkbox validation, checking and uncheking and more examples are provided.

More info:

Published by: Rakhitha Nimesh on Dec 05, 2011
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

11/02/2012

pdf

text

original

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(); } );

5

);

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

1

< 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

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->