jQuery Plugin For Checkable Images - imgCheckbox

File Size: 14.7 KB
Views Total: 3664
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


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.

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

Change logs:


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



  • Can deselect radio options.


  • Fixed some indentation


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


  • v0.5.0


  • v0.4.7


  • bugfix.


  • v0.4.3
  • Added callback events.


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


  •   Fixed formatting


  • Make form serialization more robust


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