Intro

A prototype extension to brighten up check boxes and radio buttons by replacing the controls with images of your choice.

Features:

• Replaces checkboxes and radio buttons with images.
• Supports mouse and keyboard selection.
• Supports normal, read only and disabled controls.
• Unobtrusive - degrades to standard browser behaviour when JavaScript is not available.

Tested with Prototype v1.6.0.2 on:

• Firefox 3 beta 3/Windows XP
• Internet Explorer 7/Windows XP
• Internet Explorer 6/Windows XP
• Safari 3.0.4/Windows XP

News

Proto Check v1.0 released

24 February 2008

The first version of Proto Check has been released. It's just over 4kb, and that's before any compression.

Demonstration

Checkboxes Preference 1 Preference 2

Radio buttons Option 1 Option 2 Option 3 Option 4

more demos

How To Use

Include prototype and Proto Check JavaScript source files.

<script src='prototype.js' type='text/javascript'></script>
<script src='protocheck.js' type='text/javascript'></script>

Include a Proto Check stylesheet. Make sure the image files are available to the page.

<link href='pc.css' rel='stylesheet' type='text/css' media='screen' />

Once the DOM has loaded, instantiate Proto Check. This only needs to be done once per page.

document.observe('dom:loaded', function() {
   new ProtoCheck();
});

Finally, set your markup for the input checkboxes and radio buttons that you want Proto Check to find. Each input tag must be wrapped in a label tag, the label tag should have the class pc_checkbox or pc_radiobutton.

<label class='pc_checkbox'>
   <input type='checkbox' name='check1' value='on'> Checkbox example 1</label>
<label class='pc_radiobutton'>
   <input type='radio' name='radio1' value='1'> Radio example 1</label>

Documentation

Proto Check accepts an optional array of options as a parameter that define the CSS classes used by Proto Check. The following shows the availbale options and the default values:

new ProtoCheck({

Instantiate Proto Check for the page - do this within a page loaded/DOM loaded check.

   'checkClass':           'pc_checkbox',
   'radioClass':           'pc_radiobutton',

CSS classes used to identify checkbox and radio button LABEL tags that Proto Check will act on.

   'checkOnClass':         'pc_check_checked',            // A checked checkbox
   'checkOffClass':        'pc_check_unchecked',          // An unchecked checkbox
   'checkOnDisabledClass': 'pc_check_checked_disabled',   // Disabled checked checkbox
   'checkOffDisabledClass':'pc_check_unchecked_disabled', // Disabled unchecked checkbox

CSS classes for checkbox labels when the checkbox is checked, unchecked and disabled. This would normally include an background background image.

   'radioOnClass':         'pc_radio_checked',            // A checked radio button
   'radioOffClass':        'pc_radio_unchecked',          // An unchecked radio button
   'radioOnDisabledClass': 'pc_radio_checked_disabled',   // Disabled checked radio button
   'radioOffDisabledClass':'pc_radio_unchecked_disabled', // Disabled unchecked radio button

CSS classes for radio button labels when the checkbox is checked, unchecked and disabled. This would normally include an background background image.

   'focusClass':           'pc_focus'                     // A checkbox/radio button with focus
});

CSS class for checkbox and radio button LABEL tags when the field has focus

Sample stylesheet

A sample stylesheet that uses the default Proto Check styles:

.pc_checkbox, .pc_radiobutton {
   background-position: 3px center;
   background-repeat:   no-repeat;
   border:              1px solid #fff;
   padding-left:        24px;
}
.pc_check_unchecked {
   background-image:    url(images/check_off.gif);
}
.pc_check_checked {
   background-image:    url(images/check_on.gif);
}
.pc_radio_unchecked {
   background-image:    url(images/radio_off.gif);
}
.pc_radio_checked {
   background-image:    url(images/radio_on.gif);
}
.pc_check_checked_disabled {
   background-image:    url(images/check_off_disabled.gif);
}
.pc_check_unchecked_disabled {
   background-image:    url(images/check_on_disabled.gif);
}
.pc_radio_checked_disabled {
   background-image:    url(images/radio_off_disabled.gif);
}
.pc_radio_unchecked_disabled {
   background-image:    url(images/radio_on_disabled.gif);
}
.pc_focus {
   background-color:    #ffa;
   border:              1px dotted #000;
}

Download

• Proto Check v1.0

Change log

• v1.0
  • Initial version

Contact

• Proto Check forum for support related questions, feedback
• Proto Check bug reports
• Proto Check feature requests
• or contact me via my contact page

Tags: protocheck, prototype, javascript, form, checkbox, radiobutton, web2.0.

Licence: Creative Commons Attribution-Share Alike.