jQuery plugin for custom checkboxes and radio buttons – wCheck

wCheck is a jQuery plugin for creating custom checkboxes and radio buttons. Adjust the appearance of form UI elements easily.

Creating custom checkboxes and radio buttons with jQuery

This plugin is a simple and effective solution, which allows use to apply images to style of radio buttons and checkboxes. wCheck.js is a great support for fully customizable checkbox and radio input options. The plugin uses images for background themes and selectors to allow for compatability with many browsers.

The plugin works by overlaying the original checkbox and radio on top of the image, to change the view but keep the functionality of an input element.

wCheck - a jQuery plugin for making customizable checkboxes and radios
wCheck – a jQuery plugin for making custom checkboxes and radios

Usage

1. Include the following two files:

<script type="text/javascript" src="./wCheck.js"></script>
<link rel="Stylesheet" type="text/css" href="./wCheck.css" />

Then we can apply the plugins to any radio and checkbox, for example:

$('input:radio').wRadio();
$('input:checkbox').wCheck();

Settings

Please note, that we can set defaults for wCheck and wRadio separately:

$.fn.wCheck.defaults = {
    theme: 'square-classic-blue',   
    selector: 'checkmark',          
    useExistingLabel: true,         
    highlightLabel: false           
};
$.fn.wRadio.defaults = {
    theme: 'circle-classic-blue',   
    selector: 'circle-dot-blue',    
    useExistingLabel: true,         
    highlightLabel: false           
};

We can adapt themes and labels. See more in the documentation.

License: MIT

Demos & docs:

http://wcheck.websanova.com

GitHub:

https://github.com/websanova/wCheck

See also:

Checkboxradio – jQuery checkbox replacement plugin

Ideal Forms 3: build and validate responsive HTML5 forms

jQuery plugin for custom select menus

jQuery nested checkboxes – Deep Checkbox plugin

Select2 – the jQuery replacement for select boxes

Fancy sliding form jQuery

Enjoy!

Share:Share on Facebook3Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1