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.