jQuery Plugin To Customize Native Checboxes - Toggle Checkbox

Toggle Checkbox is a jQuery plugin used to beautify native checkboxes that allows you replace default check markers with your own design (e.g. text or icons.).

Basic usage:

1. Include the jQuery Toggle Checkbox plugin after jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.toggle-checkbox.js"></script>

2. Create a set of regular checkboxes on the web page.

<input type="checkbox" class="demo" value="1">
<input type="checkbox" class="demo" value="2">
<input type="checkbox" class="demo" value="3">

3. Replace check marks with text.

$('.demo').toggleCheckbox([
  'False',
  'True'
]);

4. Replace check marks with Font Awesome icons.

$('.demo').toggleCheckbox([
  '<i class="fa fa-circle-o"></i>',
  '<i class="fa fa-check-circle-o"></i>'
]);

5. Execute a callback when a checkbox is checked / unchecked.

$('.demo').toggleCheckbox([
  '<i class="fa fa-circle-o"></i>',
  '<i class="fa fa-check-circle-o"></i>'
], function(e, targetCheckbox){

  // do something

});

6. Event.

// can be used for check all button
$('#all_check_button').on('click', function(){

  var checked = $(this).is(':checked');
  $('.toggle-checkbox').prop('checked', checked).change();

});

---

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