custom checkbox in jquery
JavaScript CSS
Permalink
Failed to load latest commit information.
dist
.gitignore
Gruntfile.js change revision number Jul 14, 2014
README.md fix older IE error Sep 17, 2014
bower.json fix older IE error Sep 17, 2014
index.html wrong merge, oops Sep 3, 2014
package.json
switcher.js
switcher.scss

README.md

jquery.switcher v1.2.4

Custom checkbox / radio button in jquery

see live example here

How to get it

git clone git://github.com/djanix/jquery.switcher.git

or

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="http://code.jquery.com/jquery-1.11.1.min.js"></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();
});

Params

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-style="default"
    data-selected="false"
    data-language="en"
    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'
    }
}