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="https://code.jquery.com/jquery-3.2.1.min.js" 
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
        crossorigin="anonymous"></script>
<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.

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

4. Activate the plugin and you're done.

$('figure').imgCheckbox()

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

$('figure').imgCheckbox({

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