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

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，并且当取消选中图像上方的不透明度时，如果我们使用 div，则返回1.0或删除该 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>

支持

仅支持:checkedIE9 及更高版本，如果您需要对 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;
}

Answer 2

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

Answer 3

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