This time I will share jQuery Plugin and tutorial about Custom Checkbox Input With Image – jQuery img-checkbox, hope it will help you in programming stack.
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.
2 |
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" |
3 |
crossorigin="anonymous"></script> |
4 |
<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.
1 |
<link href="animation.imgcheckbox.min.css" rel="stylesheet"> |
3. Add your custom check/uncheck images to the checkbox input.
2 |
<div class="figure-content"><img src="uncheck.png"></div> |
3 |
<figcaption><img src="check.png"></figcaption> |
4 |
<label><input type="checkbox" name="name"> Label</label> |
4. Activate the plugin and you’re done.
1 |
$('figure').imgCheckbox() |
5. Customize the plugin by passing the following options object to the imgCheckbox() function.
01 |
$('figure').imgCheckbox({ |
11 |
overlayBgColor: 'black', |
14 |
overlayOpacity: '0.4', |
23 |
animationDuration: 300, |
26 |
animationArray: ['scale'] |
This awesome jQuery plugin is developed by gitrequests. For more Advanced Usages, please check the demo page or visit the official website.
