在 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>