Checking a checkbox by clicking an image with changing image opacity
checkbox, forms, html, javascript, jquery
Solution
You can accomplish this using some advanced CSS selectors provided that the `<label>` is the checkbox. The `~` selector is called general sibling selector and will match all sibling after the element.
jsFiddle
CSS
input:checked ~ label {
opacity: 0.5;
}
HTML
<input type="checkbox" class="chk " checked="checked" id="img1" name="img1" value="0" />
<label for="img1">
<img class="img" src="https://www.google.com.au/images/srpr/logo4w.png" />
</label>
Support
Support for `:checked` is only present for IE9 and above, if you need support for IE8 then you can you use a `.checked` class as use it in addition to the CSS3 `:checked` selector.
JS
$('#img1').click(function () {
$(this).toggleClass('checked');
});
CSS
input:checked ~ label,
input.checked ~ label {
opacity: 0.5;
}
For support < IE8 then you should use a more general JavaScript solution.
$('#img1').click(function () {
$('label[for=' + this.id + ']').toggleClass('checked');
});
label.checked {
opacity: 0.5;
}
Problem
i have a image with checkbox, i used this code for Checking a checkbox by clicking an image... ``` <label for="img1"><img class="img" src="myimage.jpg" /></label> <input type="checkbox" class="chk " checked="checked" id="img1" name="img1" value="0" /> ``` its working fine, my question is, i want when checking check box above image opacity will be `0.5` or display a extra `div` over this image and when Un check above image opacity return to `1.0` or remove that div if we use div, any idea.??? thanks