Img select toggle

for SO36634790

HTML

<form id="savepics" action="#" method="post">
<!-- by making the image the label for the checkbox,
     clicking the image also
  class="colore selectable"
  src="//placekitten.com/200/300"
  alt="image by placeitten.com"></label>
<input type="checkbox" name="page7" id="page7" class="imagepicker">
<br>
<input type="submit" value="Save Selections">
</form>
<!-- For checkboxes, when the form is submitted any of
     the *checked* checkboxes are sent to the server;
     Checkboxes that are unchecked *are_not_sent*!
     It's not sent with a "false" or "unchecked" value,
     it's simply not sent at all (this catches a lot
     of people getting started)
-->

CSS

.bn {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}
body {
    background: #000; 
}
img {
    padding: 5px;
    vertical-align: top;
}
label, input {
  vertical-align: top;
}
/* Uncomment this and the checkbox will be hidden,
   but it still exists and is sent when the form
   is submitted. */
/*
input[type=checkbox] {
    visibility: hidden;
}
*/

JavaScript

// Clicking on the image, which is the label for
// the checkbox, toggles the checkbox state.
// When the checkbox changes, we'll also toggle the
// classes on the image.
$('input.imagepicker').change(function(e) {
    var $imgLabel = $('label[for='+this.id+']');
    $imgLabel.find('img').toggleClass('colore bn');
});