"jQuery checkbox v.1.3.0 Beta 1" demo

Lightweight custom styled checkbox implementaion for jQuery 1.2.x and 1.3.x.

Features:

  1. only inline elements used, just like default checkoxes
  2. cross-browser look and feel (tested in IE6, IE7, IE8, Firefox and Chrome engines)
  3. work with radio buttons too
  4. supports inline and jQuery attached click events
  5. supports "label hovering": when you point over parent label element, it will highlight its checkbox (thanks to Eugene for the idea)
  6. dynamic skin changing
  7. adds new checkbox events "check", "uncheck", "disable", "enable", ready to use in jQuery.bind() method

Usefull information:

  • jQuery checkbox @ jQuery Plugins
  • jQuery checkbox @ Google Groups
  • jQuery checkbox @ Google Code
  • Feel free to contact for support or if you want to make a donation.
  • Please contact if you want your site listed under "Who uses" block.

Requirements:

  • jQuery 1.3.x or 1.2.x (1.3.2 recommended)

Download:

Examples:

Default skin

Disabled & unchecked checkbox

Disabled & checked checkbox

Safari skin

Unchecked checkbox (by clicking on this checkbox you can check/uncheck the checkbox below)

Checked checkbox (this one)

Disabled & unchecked checkbox

Disabled & checked checkbox

Radio button (wrapped in <label>)

Display form state

Code

$(document).ready(function() {
  // ":not([safari])" is desirable but not necessary selector
  $('input:checkbox:not([safari])').checkbox();
  $('input[safari]:checkbox').checkbox({cls:'jquery-safari-checkbox'});
  $('input:radio').checkbox();
});	

Advanced demo (changing skin on the fly)

Switch to "Default" skin   Switch to "Safari" skin

 Last NameFirst NameTitle
DavolioNancySales Representative
FullerAndrewVice President, Sales
LeverlingJanetSales Representative
PeacockMargaretSales Representative
BuchananStevenSales Manager
SuyamaMichaelSales Representative
KingRobertSales Representative
CallahanLauraInside Sales Coordinator
DodsworthAnneSales Representative