答案 0 :(得分:2)
这是使用标签
模拟基于图像的复选框的方法
input {
display: none
}
/* switch image */
label[for="chk1"] {
display: inline-block;
text-align: center;
width: 100px;
height: 100px;
border: 2px solid black;
background: url(http://placehold.it/100/f00);
}
#chk1:checked ~ label[for="chk1"] {
background: url(http://placehold.it/100/ff0);
}
/* add content */
label[for="chk2"] {
display: inline-block;
text-align: center;
width: 100px;
height: 100px;
border: 2px solid black;
position: relative;
}
#chk2:checked ~ label[for="chk2"]::after {
content: 'V';
position: absolute;
left: 0;
right: 0;
font-size: 90px;
font-weight: bold;
font-family: arial;
}
<input id="chk1" type="checkbox">
<input id="chk2" type="checkbox">
<label for="chk1"></label>
<label for="chk2"></label>
<div>Click a box to toggle it</div>
答案 1 :(得分:1)
我不认为大多数人会在他们的复选框中放置图像。它们要么使图像像@LGSon那样的复选框,要么将图像和复选框一起包装在div中。像这样:
function toggleCheck(sibling) {
var checkBox = sibling.parentNode.getElementsByTagName("input")[0];
checkBox.checked = !checkBox.checked;
}
.image-box {
width: 150px;
text-align: center;
background: #E9E8E7;
padding: 10px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}
.image-box img {
max-width: 100%;
display: block;
margin-bottom: 7px;
}
<div class="image-box">
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" onClick="toggleCheck(this);" />
<input id="dogs" type="checkbox" name="dogs" value="Dog">
<label for="dogs">I like dogs</label>
</div>