Custom Checkbox/Radio/Switch Controls With jQuery - simpleCheck
File Size: | 33.1 KB |
---|---|
Views Total: | 3428 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.