jQuery Plugin For Checkable Images - imgCheckbox

imgCheckbox is a jQuery plugin which allows you to select an image like a checkbox. Great for use in your image selection tool such as image picker, image cropper, etc.

How to use it:

1. To get started, download the plugin and include it in your document which has jQuery library installed.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.imgcheckbox.js"></script>

2. And then call the plugin on the image you want to make checkable.

$("img.selectable").imgCheckbox();

3. Default options.

// Supports anything your browser support in the background-image property
"checkMarkImage": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMzQ2LjM4NCkiPjxwYXRoIGZpbGw9IiMxZWM4MWUiIGZpbGwtb3BhY2l0eT0iLjgiIGQ9Ik0zMiAzNDYuNGEzMiAzMiAwIDAgMC0zMiAzMiAzMiAzMiAwIDAgMCAzMiAzMiAzMiAzMiAwIDAgMCAzMi0zMiAzMiAzMiAwIDAgMC0zMi0zMnptMjEuMyAxMC4zbC0yNC41IDQxTDkuNSAzNzVsMTcuNyA5LjYgMjYtMjh6Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTkuNSAzNzUuMmwxOS4zIDIyLjQgMjQuNS00MS0yNiAyOC4yeiIvPjwvZz48L3N2Zz4=",

// apply a grayscale filter on selected images
"graySelected": true,

// apply a downscaling filter on selected images
"scaleSelected": true,

// Sets a fixed image size to all images (useful if images vary in size). 
// Values can be "200px" or "120px 200px" (not percentages).
"fixedImageSize": false,

// Sets a custom size for the image
"checkMarkSize": "30px",

// Sets the position of the checkMark.
"checkMarkPosition": "top-left",

// apply a zooming effect on the checkmark as it appears and disappears
"scaleCheckMark": true,

// fade the checkmark in and out
"fadeCheckMark": false,

// inject the checked elements into the form
// If true, imgCheckbox will find a parent form and hook into its submission. 
// A jQuery object can be passed in and the submit listener will attach to it.
"addToForm": true,

// an array of preselect items
"preselect": [],

// enable radio buttons
"radio": false,

// Fires when the initialisation of the imgCheckbox collection is complete.
"onload": false,

// Can deselect radio options.
"canDeselect": false,

// Fires when an element is clicked.
"onclick": false,

4. Public methods.

// Selects the element (if it is a member of an imgCheckbox group). 
// If the element is part of a radio group, the other elements will be deselected.
$.select()

// Deselects the element (if it is a member of an imgCheckbox group). 
// Other elements are unaffected (even in radio groups).
$.deselect()

Change logs:

2017-11-13

• Modified preselect to use bool/array for 'preselect all'

2017-06-05

• JS update

2016-01-05

• Can deselect radio options.

2015-08-15

• Fixed some indentation

2015-08-14

• v0.5.1: Added 'center' option to checkMarkPosition

2015-08-11

• v0.5.0

2015-08-09

• v0.4.7

2015-07-30

• bugfix.

2015-07-28

• v0.4.3
• Added callback events.

2015-07-08

• Support for radio buttons.
• Support for select/deselect. 

2015-06-28

•   Fixed formatting

2015-06-13

• Make form serialization more robust

2015-06-12

• Functional form submission (default, without parameters; uses $.closest)

---

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