[英]Checking a checkbox by clicking an image with changing image opacity
i have a image with checkbox, i used this code for Checking a checkbox by clicking an image... 我有一个带有复选框的图像,我使用此代码通过单击图像来检查复选框...
<label for="img1"><img class="img" src="myimage.jpg" /></label>
<input type="checkbox" class="chk " checked="checked" id="img1" name="img1" value="0" />
its working fine, my question is, i want when checking check box above image opacity will be 0.5
or display a extra div
over this image and when Un check above image opacity return to 1.0
or remove that div if we use div, any idea.??? 它的工作正常,我的问题是,我想在检查上方的图像时,图像不透明度为0.5
或在此图像上显示一个额外的div
,当Un检查上面的图像不透明度返回1.0
或删除该div如果我们使用div,任何想法。 ???
thanks 谢谢
You can accomplish this using some advanced CSS selectors provided that the <label>
is the checkbox. 您可以使用一些高级CSS选择器来完成此操作,前提是<label>
是复选框。 The ~
selector is called general sibling selector and will match all sibling after the element. ~
选择器被称为通用兄弟选择器,将匹配元素之后的所有兄弟。
CSS CSS
input:checked ~ label {
opacity: 0.5;
}
HTML 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>
Support for :checked
is only present for IE9 and above, if you need support for IE8 then you can you use a .checked
class as use it in addition to the CSS3 :checked
selector. 仅对IE9及更高版本提供对:checked
支持,如果您需要对IE8的支持,则除了CSS3 :checked
选择器外,还可以使用.checked
类。
JS JS
$('#img1').click(function () {
$(this).toggleClass('checked');
});
CSS CSS
input:checked ~ label,
input.checked ~ label {
opacity: 0.5;
}
For support < IE8 then you should use a more general JavaScript solution. 对于支持<IE8,您应该使用更通用的JavaScript解决方案。
$('#img1').click(function () {
$('label[for=' + this.id + ']').toggleClass('checked');
});
label.checked {
opacity: 0.5;
}
$('.img').click(function() {
if ($('#img1').is(':checked'))
$(this).css('opacity', 0.5);
else
$(this).css('opacity', 1);
});
$('.img').click(function() {
$(this).css('opacity', $('#img1').is(':checked')?0.5:1.0);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.