通过单击具有更改图像不透明度的图像来选中复选框

Question

我有一个带复选框的图像,我使用此代码通过单击图像检查复选框...

<label for="img1"><img class="img" src="myimage.jpg" /></label>
<input type="checkbox" class="chk " checked="checked" id="img1" name="img1" value="0" />

它的工作正常,我的问题是,我想在检查上方的图像时,图像不透明度将0.5显示或div在此图像上显示一个额外的,当Un检查上面的图像不透明度返回1.0或删除该div如果我们使用div,任何想法.???

谢谢

Answer 1

您可以使用一些高级CSS选择器来完成此操作,前提<label>是该复选框.该~选择被称为一般兄弟选择,并会匹配的元素毕竟兄弟.

的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>

支持

:checked仅支持IE9及更高版本,如果您需要IE8支持,那么.checked除了CSS3 :checked选择器之外,您还可以使用类来使用它.

JS

$('#img1').click(function () {
    $(this).toggleClass('checked');
});

CSS

input:checked ~ label,
input.checked ~ label {
    opacity: 0.5;
}

对于支持<IE8,您应该使用更通用的JavaScript解决方案.

$('#img1').click(function () {
    $('label[for=' + this.id + ']').toggleClass('checked');
});

label.checked {
    opacity: 0.5;
}