jQuery checkbox v.1.3.0

jQuery checkbox v.1.3.0

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:

Requirements:

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

Download:

  • Download from plugins.jQuery.com
  • Download from code.google.com

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>)

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)

  Last Name First Name Title
Davolio Nancy Sales Representative
Fuller Andrew Vice President, Sales
Leverling Janet Sales Representative
Peacock Margaret Sales Representative
Buchanan Steven Sales Manager
Suyama Michael Sales Representative
King Robert Sales Representative
Callahan Laura Inside Sales Coordinator
Dodsworth Anne Sales Representative