Custom Checkbox Input With Image - jQuery img-checkbox

Img-checkbox

Img-checkbox is a jQuery-based replacement for input checkboxes. It supports image, fontawesome, and custom content as input.

Demo

jsfiddle

Usage

Include jQuery

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

Include img-checkbox

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

For use animation include imgcheckbox.css

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

Add figure component

<figure class="imgcheckbox">     <div class="figure-content"><img src="img/Delete.png"></div>     <figcaption><img src="holder.js/50x50"></figcaption>     <label><input type="checkbox" name="name"> Label</label> </figure>

Activate plugin with default options

$('.imgcheckbox').imgCheckbox()

Or activate plugin with other options

$('.imgcheckbox').imgCheckbox({ 	width: 'auto', 	height: 'auto', 	textColor: 'white', 	overlayBgColor: 'black', 	overlayOpacity: '0.4', 	round: true, 	animation: true, 	animationDuration: 300, })