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}}或删除那个div，如果我们使用div，任何想法。???

感谢

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

支持

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

<强> JS

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

<强> CSS

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

支持＆lt; 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);
});

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

3 个答案:

支持