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

【问题标题】：Checking a checkbox by clicking an image with changing image opacity通过单击具有更改图像不透明度的图像来选中复选框
【发布时间】：2013-03-22 08:04:18
【问题描述】：

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

<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，当取消选中上方的图像不透明度时返回1.0 或删除它div 如果我们使用 div，有什么想法吗？？？？

谢谢

【问题讨论】：

这里已经回答了这个问题：stackoverflow.com/questions/5275857/…

标签： javascript jquery html forms checkbox

【解决方案1】：

如果<label> 是复选框，您可以使用一些高级 CSS 选择器来完成此操作。 ~ 选择器称为通用兄弟选择器，将匹配元素之后的所有兄弟。

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 的支持，那么除了 CSS3 :checked 选择器之外，您还可以使用 .checked 类。

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

CSS

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

为了支持

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

label.checked {
    opacity: 0.5;
}

【讨论】：

它工作正常...一个问题这个 CSS 属性支持所有主要浏览器...??
从 IE9 及以上版本开始，如果您想要更早的支持，则需要使用 javascript 来完成。 developer.mozilla.org/en/docs/CSS/:checked

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

您好，欢迎来到 StackOverflow。好的答案通常有一些文字来解释代码在做什么。这将帮助那些不明白你在做什么的人。