Checkbox Radio To Toggle Buttons jQuery Bootstrap - Free Download Convert Checkbox/Radio Inputs Into Toggle Buttons - Checkbox2Button

Free Download Convert Checkbox/Radio Inputs Into Toggle Buttons – Checkbox2Button

Posted on

This time I will share jQuery Plugin and tutorial about Convert Checkbox/Radio Inputs Into Toggle Buttons – Checkbox2Button, hope it will help you in programming stack.

Checkbox Radio To Toggle Buttons jQuery Bootstrap - Free Download Convert Checkbox/Radio Inputs Into Toggle Buttons - Checkbox2Button
File Size: 7.91 KB
Views Total: 6363
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Checkbox2Button is a jQuery plugin for Bootstrap (4 and 3) framework that converts the regular checkboxes and radio buttons into toggle buttons for better user experience.

Alternative plugins:

How to use it:

1. Include Bootstrap’s stylesheet and the jQuery Checkbox2Button plugin’s CSS checkbox2button.css in the header of the html page.

1 <link rel="stylesheet" href="/path/to/bootstrap.min.css">
2 <link rel="stylesheet" href="css/checkbox2button.css">

2. Include jQuery JavaScript library and the jQuery Checkbox2Button plugin’s JavaScript checkbox2button.js at the bottom of the html page.

2         integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
3         crossorigin="anonymous"></script>
4 <script src="js/checkbox2button.min.js"></script>

3. Add the checkbox2button class to the parent containers and done.

01 <div class="checkbox checkbox2button">
02   <label>
03     <input type="checkbox" name="checkbox1" value="1"> Checkbox 1
04   </label>
05 </div>
06  
07 <div class="checkbox checkbox2button">
08   <label>
09     <input type="checkbox" name="checkbox2" value="1"> Checkbox 2
10   </label>
11 </div>
12  
13 <div class="checkbox checkbox2button">
14   <label>
15     <input type="radio" name="radio1" value="1"> Radio Button 1
16   </label>
17 </div>
18  
19 <div class="checkbox checkbox2button">
20   <label>
21     <input type="radio" name="radio1" value="2"> Radio Button 2
22   </label>
23 </div>

Changelog:

2019-09-26

  • Small fix.

2019-02-01

  • Allow null default value

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

source : jquery.net