jQuery Plugin to Make Pretty Bootstrap Style List Checkboxes

by Posted on

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.

jQuery Plugin to Make Pretty Bootstrap Style List Checkboxes


Libraries

Load following libraries on page to add easy list selection with checkboxes feature on website.

<!--CSS-->
<link href='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">
 
<!--JS-->
<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

<ul class="demo">
		    <li>Rohit Kumar</li>
		    <li>Manish Kumar</li>
		    <li class="checked">Shahil Patel</li>
		    <li class="checked">John Kale</li>
		</ul>

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.

DEMO | DOWNLOAD

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.


Published by admin