Custom Checkbox/Radio/Switch Controls With jQuery - simpleCheck

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.

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.

  • Publication date: 30.03.2018
  • Source