HTML 表单将图像制作为复选框

Question

我正在尝试为可点击的图像制作一个 HTML 表单复选框，该图像在初始化时是一个图像，在单击时是另一个图像。它还应该能够在其上存储一两个变量（因为我需要使用行和列变量生成它们）并使用提交按钮。

如果这是一个非常简单的问题，我也很抱歉，我通常只在需要时使用 C# 和一点 PHP，但这次我被迫使用 html 和 CSS，而我从来不擅长这些。

Answer 1

这是一个简单的入门指南，您可以将其包装在一个表单中：.checkbox-toggle {&nbsp; &nbsp; display: none;}.checkbox-toggle + img {&nbsp; &nbsp; display: inline-block;}.checkbox-toggle + img + img {&nbsp; &nbsp; display: none;}.checkbox-toggle:checked + img {&nbsp; &nbsp; display: none;}.checkbox-toggle:checked + img + img {&nbsp; &nbsp; display: inline-block;}<label>&nbsp; &nbsp; <input class="checkbox-toggle" type="checkbox" name="img[0][0]" />&nbsp; &nbsp; <img src="https://picsum.photos/id/1/100" />&nbsp; &nbsp; <img src="https://picsum.photos/id/2/100" /></label><label>&nbsp; &nbsp; <input class="checkbox-toggle" type="checkbox" name="img[0][1]" />&nbsp; &nbsp; <img src="https://picsum.photos/id/3/100" />&nbsp; &nbsp; <img src="https://picsum.photos/id/4/100" /></label>也在JSFiddle上