Custom checkbox / radio button in jquery
see live example here
git clone git://github.com/djanix/jquery.switcher.git
or
bower install jquery.switcher
Firefox, Chrome, Safari, iOS, Android, IE9+
<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>
<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 |
var switcherEl = $('input').switcher({
style: "default",
selected: false,
language: "en",
disabled: false
});
<input type="checkbox" name="switchName" value="switchValue"
data-style="default"
data-selected="false"
data-language="en"
data-disabled="false" />
switcherEl.switcher('setValue', true);
switcherEl.switcher('setDisabled', true);
switcherEl.switcher('setLanguage', true);
switcherEl.switcher('getLanguage', function (language) {
var languageValue = language;
});
switcherEl.switcher('setLanguage', {jsonObject});
- the json object need to follow this structure:
{
en: {
yes: 'yes',
no: 'no'
},
fr: {
yes: 'oui',
no: 'non'
}
}