custom checkbox in jquery
JavaScript CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

jquery.switcher v1.2.4

Custom checkbox / radio button in jquery

see live example here

How to get it

git clone git://


bower install jquery.switcher

Browser support

Firefox, Chrome, Safari, iOS, Android, IE9+

What to include in your html

<link rel="stylesheet" href="path/to/switcher.min.css">
<script src=""></script>
<script src="path/to/switcher.min.js"></script>

How to initialize the plugin

<input type="checkbox" name="switchName" value="switchValue" />
$(function () {
    var switcherEl = $('input').switcher();


Param Default value Info
style 'default' class added to the html element to change the input visual. Right now there's only 'default' and 'short'
selected false if the input is checked or not. If nothing is specified, it will take the input checked value
language 'en' default language used for the yes/no texts
disabled false if the input is disabled
copy {obj} json object with all the languages. By default, it only contain fr/en

You can change the parameters in the javascript when instantiating the plugin

var switcherEl = $('input').switcher({
    style: "default",
    selected: false,
    language: "en",
    disabled: false

You can also change it in the html

<input type="checkbox" name="switchName" value="switchValue"
    data-disabled="false" />

Public methods

Set value

switcherEl.switcher('setValue', true);

Set disabled

switcherEl.switcher('setDisabled', true);

Set language

switcherEl.switcher('setLanguage', true);

Get language

switcherEl.switcher('getLanguage', function (language) {
  var languageValue = language;

Import language json file

switcherEl.switcher('setLanguage', {jsonObject});
  • the json object need to follow this structure:
    en: {
        yes: 'yes',
        no: 'no'
    fr: {
        yes: 'oui',
        no: 'non'