如何实现Checkbox单选切换显示对应图片？当前多选时图片叠加显示

你的需求本质是单选逻辑，用checkbox很难原生实现自动取消选中的功能，换成radio按钮更合适——它天生支持同组单选，浏览器会自动处理选中状态互斥的逻辑。

修改步骤： #

• 把所有<input type="checkbox">替换成<input type="radio">
• 给所有radio按钮设置相同的name属性（比如name="image-group"），这是实现单选的核心
• 保留原本的CSS样式逻辑即可

完整代码示例： #

<body>
  <input type="radio" name="image-group" />
  <img src="pics/35.jfif"> 
  <input type="radio" name="image-group" />
  <img src="pics/38.jfif"> 
</body>

<style>
img {
  display: none;
}

input {
  height: 30px;
  width: 30px;
}

input:checked + img {
  display: block;
}
</style>

效果说明： #

• 点击任意一个radio按钮，会自动取消另一个的选中状态
• 只有当前选中的radio对应的图片会显示，其他图片自动隐藏

内容的提问来源于stack exchange，提问作者Roy Bandi