Custom Checkbox/Radio/Switch Controls With jQuery - simpleCheck

simpleCheck is a jQuery plugin which uses JavaScript and CSS to create beautiful custom checkboxes, radio buttons and toggle switches for better user experience.

How to use it:

1. Add references to jQuery library and the jQuery simpleCheck plugin's files as follows:

<link rel="stylesheet" href="css/simpleCheck.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="js/simpleCheck.min.js"></script>

2. Initialize the plugin on the checkbox and radio inputs and done.

// checkbox 
$('input[type=checkbox]').simpleCheck('init');

// radio button
$('input[type=radio]').simpleCheck('init');

// converts checkbox into a switch
var switchSettings = {
    isSwitch: true
};
$('input[type=checkbox]').simpleCheck(switchSettings);

3. Disable/enable the checkbox, radio button and toggle switch.

// checkbox 
$('input[type=checkbox]').simpleCheck('disable');

// radio button
$('input[type=radio]').simpleCheck('enable');

4. Check/uncheck the checkbox, radio button and toggle switch.

// checkbox 
$('input[type=checkbox]').simpleCheck('check');

// radio button
$('input[type=radio]').simpleCheck('uncheck');

5. Possible options to customize the plugin.

var settings = {

    // 'light' or 'dark'
    theme: 'light',

    // is switch?
    isSwitch: false,

    // default CSS classes
    checkbox: {
        defaultClass: 'simpleCheck',
        checkedClass: 'simpleCheck-checked',
        disabledClass: 'simpleCheck-disabled'
    },
    radio: {
        defaultClass: 'simpleCheck',
        radioClass: 'radio',
        checkedClass: 'simpleCheck-checked',
        disabledClass: 'simpleCheck-disabled'
    },
    switch: {
        defaultClass: 'simpleCheck',
        switchClass: 'switch',
        checkedClass: 'simpleCheck-checked',
        disabledClass: 'simpleCheck-disabled'
    },

    // initialize the plugin
    init: false
};

6. Event handlers available.

$('input[type=checkbox]').simpleCheck()

.on('simpleCheckStateChanged', function(){
  // fired when the state is changed
})

.on('simpleEnableStateChanged', function(){
  // fired when the state is changed
})

.on('simpleChecked', function(){
  // fired when checked
})

.on('simpleUnchecked', function(){
  // fired when unchecked
})

.on('simpleEnabled', function(){
  // fired when enabled
})

.on('simpleDisabled', function(){
  // fired when disabled
})

---

This awesome jQuery plugin is developed by xAzzzu. For more Advanced Usages, please check the demo page or visit the official website.