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

Question

我正在尝试为可点击的图像制作一个 HTML 表单复选框，该图像在初始化时是一个图像，在单击时是另一个图像。它还应该能够在其上存储一两个变量（因为我需要使用行和列变量生成它们）并使用提交按钮。如果这是一个非常简单的问题，我也很抱歉，我通常只在需要时使用 C# 和一点 PHP，但这次我被迫使用 html 和 CSS，而我从来不擅长这些。

Answer 1

这是一个简单的入门指南，您可以将其包装在一个表单中：

.checkbox-toggle {

    display: none;

}

.checkbox-toggle + img {

    display: inline-block;

}

.checkbox-toggle + img + img {

    display: none;

}

.checkbox-toggle:checked + img {

    display: none;

}

.checkbox-toggle:checked + img + img {

    display: inline-block;

}

<label>

    <input class="checkbox-toggle" type="checkbox" name="img[0][0]" />

    <img src="https://picsum.photos/id/1/100" />

    <img src="https://picsum.photos/id/2/100" />

</label>

<label>

    <input class="checkbox-toggle" type="checkbox" name="img[0][1]" />

    <img src="https://picsum.photos/id/3/100" />

    <img src="https://picsum.photos/id/4/100" />

</label>

也在JSFiddle上