Custom Checkbox Input With Image - jQuery img-checkbox

File Size: 22.5 KB
Views Total: 6306
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Custom Checkbox Input With Image - jQuery img-checkbox

img-checkbox is a checkbox replacement plugin for jQuery that allows you to replace the regular checkbox input with custom html contents such as images, icons, etc.

How to use it:

1. Load the required jQuery library and the img-checkbox plugin's JavaScript jquery.imgcheckbox.min.js at the end of the html document.

<script src="" 
<script src="jquery.imgcheckbox.min.js"></script>

2. If you need animations, load the animation.imgcheckbox.min.css in the head section of the html document.

<link href="animation.imgcheckbox.min.css" rel="stylesheet">

3. Add your custom check/uncheck images to the checkbox input.

  <div class="figure-content"><img src="uncheck.png"></div>
  <figcaption><img src="check.png"></figcaption>
  <label><input type="checkbox" name="name"> Label</label>

4. Activate the plugin and you're done.


5. Customize the plugin by passing the following options object to the imgCheckbox() function.


  // size
  width: 'auto',
  height: 'auto',

  // text color
  textColor: 'white',

  // bg color of overlay
  overlayBgColor: 'black',

  // 0.0 ~ 1.0
  overlayOpacity: '0.4',

  // is rounded?
  round: false,

  // enable animation
  animation: false,

  // duration in milliseconds
  animationDuration: 300,

  // animatio type
  animationArray: ['scale']

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