创建可以在html中用作按钮的图像

Question

我正在创建一个网站的html，并在其中的一部分，用户需要点击不同的图像。但我不知道如何从用户点击图像中获取输入比如在复选框上。
那么我怎么做呢，作为表单的一部分，当他们提交时，我知道他们选择了哪些图像
谢谢!

Answer 1

您可以使用不可见的复选框并将图像设置在标签内。如果图片被点击，你会触发

复选框

.imageCheck {
display: none;
}
label {
display: inline-block;
margin: 10px;
}
.imageCheck:checked + label {
border: solid 2px red;
}

<input class="imageCheck" type="checkbox" id="img1" />
<label for="img1">
<img src="http://placekitten.com/200/300" />
</label>
<input class="imageCheck" type="checkbox" id="img2" />
<label for="img2">
<img src="http://placekitten.com/200/300" />
</label>
<input class="imageCheck" type="checkbox" id="img3" />
<label for="img3">
<img src="http://placekitten.com/200/300" />
</label>