Custom Checkbox Radio Switch jQuery simpleCheck - Download Custom Checkbox/Radio/Switch Controls With jQuery - simpleCheck

Download Custom Checkbox/Radio/Switch Controls With jQuery – simpleCheck

By Posted on

This time I will share jQuery Plugin and tutorial about Custom Checkbox/Radio/Switch Controls With jQuery – simpleCheck, hope it will help you in programming stack.

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

Demo Download

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:

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

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

view source
01 // checkbox
02 $('input[type=checkbox]').simpleCheck('init');
03  
04 // radio button
05 $('input[type=radio]').simpleCheck('init');
06  
07 // converts checkbox into a switch
08 var switchSettings = {
09     isSwitch: true
10 };
11 $('input[type=checkbox]').simpleCheck(switchSettings);

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

view source
1 // checkbox
2 $('input[type=checkbox]').simpleCheck('disable');
3  
4 // radio button
5 $('input[type=radio]').simpleCheck('enable');

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

view source
1 // checkbox
2 $('input[type=checkbox]').simpleCheck('check');
3  
4 // radio button
5 $('input[type=radio]').simpleCheck('uncheck');

5. Possible options to customize the plugin.

view source
01 var settings = {
02  
03     // 'light' or 'dark'
04     theme: 'light',
05  
06     // is switch?
07     isSwitch: false,
08  
09     // default CSS classes
10     checkbox: {
11         defaultClass: 'simpleCheck',
12         checkedClass: 'simpleCheck-checked',
13         disabledClass: 'simpleCheck-disabled'
14     },
15     radio: {
16         defaultClass: 'simpleCheck',
17         radioClass: 'radio',
18         checkedClass: 'simpleCheck-checked',
19         disabledClass: 'simpleCheck-disabled'
20     },
21     switch: {
22         defaultClass: 'simpleCheck',
23         switchClass: 'switch',
24         checkedClass: 'simpleCheck-checked',
25         disabledClass: 'simpleCheck-disabled'
26     },
27  
28     // initialize the plugin
29     init: false
30 };

6. Event handlers available.

view source
01 $('input[type=checkbox]').simpleCheck()
02  
03 .on('simpleCheckStateChanged', function(){
04   // fired when the state is changed
05 })
06  
07 .on('simpleEnableStateChanged', function(){
08   // fired when the state is changed
09 })
10  
11 .on('simpleChecked', function(){
12   // fired when checked
13 })
14  
15 .on('simpleUnchecked', function(){
16   // fired when unchecked
17 })
18  
19 .on('simpleEnabled', function(){
20   // fired when enabled
21 })
22  
23 .on('simpleDisabled', function(){
24   // fired when disabled
25 })

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

source : jquery.net

Related posts: