Custom jQuery Checbox & Radio Input Plugin - Custom Checkbox

File Size: 22 KB
Views Total: 3669
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Custom jQuery Checbox & Radio Input Plugin - Custom Checkbox

Custom Checkbox is a lightweight jQuery plugin which allows you to change the look of checkboxes and radio buttons by using your own images for check/uncheck states.

Basic usage:

1. Import jQuery library and the jQuery custom checkbox plugin's JavaScript file into your html file.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="source/jquery.checkbox.js"></script>

2. Wrap your checkboxes and radio buttons into label elements.

<label>
  <input type="checkbox" name="demo">
    <span>Option 1</span>
</label>

3. Call the function on the label element and specify the images for check/uncheck symbols.

$("label").checkbox({
  checked: "checked.png",
  check: "check.png"
});

4. Callback functions.

$("label").checkbox({
  checked: "checked.png",
  check: "check.png",
  onChange: function() {
    // do something
  },
  onLoad: function(i) {
    // do something
  }
});

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