1

一旦选中复选框并将默认不透明度设置为 0.5（半不透明度），我想将复选框图像的不透明度更改为 1.0（正常不透明度）。但我不知道 JavaScript 和 CSS 中的编码。

<input type="checkbox" id="n1" name="n1" style="display: none;" /><label for="n1"><img src="images/n1.png" width="20" height="20" /></label>
<input type="checkbox" id="n2" name="n2" style="display: none;" /><label for="n2"><img src="images/n2.png" width="20" height="20" /></label>

...

<input type="checkbox" id="n50" name="n50" style="display: none;" /><label for="n2"><img src="images/n50.png" width="20" height="20" /></label>
4

2 回答 2

1

这是一种无需 JS 仅使用 CSS 的方法：

label img {
    opacity : 0.5;
}
input[type=checkbox]:checked + label img {
    opacity : 1;
}

演示：http: //jsfiddle.net/W2hHg/

请注意，它使用相邻的兄弟选择器+，因此它依赖于紧跟在相应复选框元素之后的标签元素。

但是，如果您想支持不实现CSS:checked选择器的 IE<=8，我仍然建议定义label img上面的类以设置默认不透明度，然后在选中时定义以下类：

label.checked img {
    opacity : 1;
}

...然后使用 JS 添加和删除该类：

document.onclick = function(e) {
    if (!e) e = window.event;
    var el = e.target || e.srcElement;
    if (el.type === "checkbox") {
        if (el.checked)
            el.nextSibling.className += " checked";
        else
            el.nextSibling.className = el.nextSibling.className.replace(/\bchecked\b/,"");
    }
};

演示：http: //jsfiddle.net/W2hHg/2/

于 2013-11-10T11:10:42.110 回答
0

你可以试试这个，

 $(document).ready(function(e) {
    $('input:checkbox').click(function(){    

     var ImgId = 'img_'+$(this).attr('id');              
       if( $(this).is(':checked')) {
           $("#"+ImgId).css('opacity', '0.5');
         } else {
            $("#"+ImgId).css('opacity', '1');
          }             


        });//end click
 });//end ready

HTML：

    <input type="checkbox" id="n1" name="n1"  /><label for="n1"><img src="images/n1.png" width="20" height="20" id='img_n1' /></label>
    <input type="checkbox" id="n2" name="n2" /><label for="n2"><img src="images/n2.png" width="20" height="20"  id='img_n2'/></label>
于 2013-11-10T11:12:41.713 回答