🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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.).

Checkbox

Documentation

jquery.toggle-checkbox

A jQuery plugin to replace input checkbox with specific contents like icons.

This package is not under maintenance because it was integrated with jquery.toggle-check.

サンプル画像

Requirements

Installation

Using bower is the simplest way.

bower install jquery.toggle-checkbox --save-dev 

Usage

Basic Way

in HTML

<input name="checkboxes[]" type="checkbox" class="toggle-checkbox" value="1"> <input name="checkboxes[]" type="checkbox" class="toggle-checkbox" value="2"> <input name="checkboxes[]" type="checkbox" class="toggle-checkbox" value="3" checked> 

in JavaScript

$('.toggle-checkbox').toggleCheckbox([     '<span>Open</span>',     '<span>Close</span>' ]); 

with Callback

$('.toggle-checkbox').toggleCheckbox([     '<i class="fa fa-circle-o"></i>',     '<i class="fa fa-check-circle-o"></i>' ], function(e, targetCheckbox){      alert(targetCheckbox.val());  }); 

Changing checked value by event

$('#all_check_button').on('click', function(){      var checked = $(this).is(':checked');     $('.toggle-checkbox').prop('checked', checked).change();  }); 

*You need call change().

License

This package is licensed under the MIT License.

Copyright 2015 Sukohi Kuhoh


You May Also Like