Kalypto

Created & copyright (c) by Mike Behnke

local-pc-guy.com
Twitter: @LocalPCGuy

Description: Kalypto is a basic plugin to use a simple sprite and CSS in place of a checkbox or radio button. Styles for the checked/non-checked state should be defined in a stylesheet, and the plugin changes the class and maintains the state of the checkbox or radio button.

Kalypto = καλυπτω (Greek) which translates to "to cover, to conceal"

Note: for the sake of this demo, the inputs are not hidden so that you can see that they maintain the state with the link. The default state is for the inputs to be hidden and replaced by the images.

usage:

$("input[name=rDemo]").kalypto();
$("#checkboxDemo").kalypto();

Events:

(bound on the input)

k_elbuilt: when an element is initially built
k_checked: when an element is checked
k_unchecked: when an element is checked

options/defaults:

{
    toggleClass: "toggle",               // This is the base class for the created element
    checkedClass: "checked",             // This is the active (or selected/checked) class
    hideInputs: true,                    // If for some reason you don't want to hide the inputs, mainly in for the demo page
    copyInputClasses: true,              // If there are classes on the input, by default they will be copied to the new element
    dataLabel: "",                       // If you want text in your custom element, you can add it with a data-label attribute on the input (data-label="Custom Text")
    checkedEvent: "k_checked",           // This event will be triggered on the input when it is checked
    uncheckedEvent: "k_unchecked",       // This event will be triggered on the input when it is unchecked
    elBuiltEvent: "k_elbuilt",           // This event will be triggered on the input when the custom element is built
    customClasses: ""                    // If you want to add custom classes when it is built, add them here
}

View Kalypto on GitHub

Released under MIT License