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