以下代码使用脚本在第二次点击相同的单选按钮时切换/取消选中状态。
我的问题是如何仅使用CSS实现此操作？
(function(lastimg) {
document.querySelector("#img-select").addEventListener('click', function(e){
if (e.target.tagName.toLowerCase() == 'input') {
if (lastimg == e.target) {
e.target.checked = false;
lastimg = null;
} else {
lastimg = e.target;
}
}
});
}());.container {
display: flex;
flex-wrap: wrap;
max-width: 660px;
}
.container > label {
flex: 1;
flex-basis: 33.333%;
}
.container > div {
flex: 1;
flex-basis: 100%;
}
.container label img {
display: block;
margin: 0 auto;
}
.container input, .container input ~ div {
display: none;
padding: 10px;
}
.container #img1:checked ~ #img1txt,
.container #img2:checked ~ #img2txt,
.container #img3:checked ~ #img3txt,
.container #img4:checked ~ #img4txt {
display: block;
}<div id="img-select" class="container">
<input id="img1" type="radio" name="img-descr">
<input id="img2" type="radio" name="img-descr">
<input id="img3" type="radio" name="img-descr">
<label for="img1">
<img src="http://lorempixel.com/200/200/food/1/" alt="">
</label>
<label for="img2">
<img src="http://lorempixel.com/200/200/food/6/" alt="">
</label>
<label for="img3">
<img src="http://lorempixel.com/200/200/food/8/" alt="">
</label>
<div id="img1txt">
<div>Recipe nr 1</div>
</div>
<div id="img2txt">
<div>Recipe nr 2</div>
</div>
<div id="img3txt">
<div>Recipe nr 3</div>
</div>
</div>编辑
我需要一个跨浏览器的解决方案，能在主流浏览器上运行，并且无需脚本，只用CSS。
为了澄清，我希望它能够像普通单选框一样工作，但如果多次点击同一个单选框，则应像复选框一样切换自身状态。
此外，允许进行标记更改，只要布局结构保持相同，并且如果页面中有超过3个菜谱，我也希望它可以换行。
编辑2
问题的主要焦点是如何使单选框可切换，尽管一些答案展示了使用纯CSS切换状态的其他方法，任何这类技巧都是受欢迎的。