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


Tested with Prototype v1.6.0.2 on:


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.


Radio buttons

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>


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;


Change log


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

Licence: Creative Commons Attribution-Share Alike.