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

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

• javascript
• jquery
• html
• forms
• checkbox

• This has been answered here: stackoverflow./questions/5275857/… – aaaaaa Commented Apr 1, 2013 at 8:43

3 Answers 3

You can acplish 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..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;
}

$('.img').click(function() {
    if ($('#img1').is(':checked'))
        $(this).css('opacity', 0.5);
    else
        $(this).css('opacity', 1);
});

$('.img').click(function() {
    $(this).css('opacity', $('#img1').is(':checked')?0.5:1.0);
});