HTML 表单使图像成为复选框答案

【问题标题】：HTML forms make image to a checkboxHTML 表单使图像成为复选框
【发布时间】：2020-04-19 12:28:26
【问题描述】：

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

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

【问题讨论】：

请发布您的代码，到目前为止您尝试过的 HTML 和 CSS。还要澄清你对存储变量的意思；你在使用 JavaScript 吗？输入框将允许用户输入，但您需要什么来处理该信息。如果这是两个问题的组合，你应该问两个问题，而不是把它们捆绑在一起
事情是我几乎对html和CSS一无所知，我想做的是以下几点： order.php 得到两个值，一个用于行（x），另一个用于列(y) 然后我需要创建 x 行和 y 列的图像，这些图像在单击时会发生变化，并且当用户最终决定单击提交时，finalize.php 文件必须获取有关单击了哪些图像的所有信息。关于“发布你的代码”部分，我唯一可以发布的是我的 order.php 文件，它不应该帮助这种情况，因为它只有基本的 GUI。
如果您还没有尝试过制作表格，请在发布问题之前先进行一些研究并尝试。那里有很多资源。这不是代码编写服务

【解决方案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

【讨论】：

非常感谢，我能够对其进行编辑，使其完美运行 :)