Here I am going to share simple jQuery Plugin to Make Pretty Bootstrap Style List Checkboxes. simsCheckbox jQuery Plugin is a plugin to create Bootstrap style checkboxes easily. This plugin convert normal html unordered list into a selectable list view with checkboxes and custom check/uncheck markers. you can set lot’s of default properties like selected and disable checkboxes on load.
Libraries
Load following libraries on page to add easy list selection with checkboxes feature on website.
<link href="https://www.iamrohit.in/jquery-plugin-to-make-pretty-bootstrap-style-list-checkboxes/simsCheckbox.css" rel='stylesheet' type='text/css' /> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/darkly/bootstrap.min.css"> <script src="//code.jquery.com/jquery-latest.min.js">script> <script src='simsCheckbox.js' type='text/javascript'>script> |
HTML
A simple way to create Bootstrap style checkboxes
|
- Rohit Kumar
- Manish Kumar
- Shahil Patel
- John Kale
JS
Now Initialize the plugin with default options.
Use following options to customize the list checkboxes.
$(document).ready(function (){ $(".demo").simsCheckbox({ //set treat as checkbox or radio btnStyle: 'checkbox', //selector height height: 'auto', //element element: "li", //title icon titleIcon: "square-o", //unchecked class uncheckedClass: "btn-default", //checked class checkedClass: "btn-warning", //select/unselect all button selectAllBtn: false, //select/unselect text selectAllText: 'Select/Unselect All' }); |
See live demo and download source code.
Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.