Question

我想对我的问题提供一些帮助

详细说明，我有一个小屋网站，我从复选框列表中选择功能

如：

5间卧室 6间卧室

我希望在已选中的复选框中隐藏没有所需功能的图像

这是我用作测试媒介的代码：

document.getElementById('chalet01').style.visibility=(this.checked)?'hidden':'visible';"

通过此链接可以看到围绕我的问题的完整代码： http://jsfiddle.net/DL4UV/

但这不是有效的，目的是一个问题，如果我也检查两个复选框它会隐藏所有图像而不是全部显示

我希望你们中的任何人能够提出更有效的解决方案

提前致谢

Answer 1

试试这个纯CSS解决方案：http://jsfiddle.net/AUh6E/1/

img{
    display: none;
}
input[type="checkbox"]:checked + img{
    display: inline;
}

Answer 2

这是另一个纯CSS解决方案，这次你可以为每个复选框分配多个图像，唯一的额外要求是你需要事先知道你将在页面上显示的复选框的数量：http://jsfiddle.net/AUh6E/2/

#bathroom:checked ~ img[data-for*="bathroom"],
#shower:checked ~ img[data-for*="shower"],
#breakfast:checked ~ img[data-for*="breakfast"]{
    display: inline;
}

EDITED

如果您想从已经显示的图片开始，可以使用:not伪选择器：http://jsfiddle.net/AUh6E/3/

img{
    display: inline;
}
#bathroom:checked ~ img:not([data-for*="bathroom"]),
#shower:checked ~ img:not([data-for*="shower"]),
#breakfast:checked ~ img:not([data-for*="breakfast"]){
    display: none;
}

使用复选框隐藏图像

2 个答案:

EDITED