通過單擊具有更改圖像不透明度的圖像來選中復選框

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>

支持

僅對IE9及更高版本提供對:checked支持，如果您需要對IE8的支持，則除了CSS3 :checked選擇器外，還可以使用.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);
});