为何radio单选框无法取消选中和多选，如何实现取消选中功能？

首先明确两个核心规则：

• HTML原生type="radio"单选框的默认设计为：同组单选框仅允许选中一个，且选中后无法通过点击自身取消选中，属于表单控件的标准规范
• 你当前代码里的单选框没有设置相同的name属性，浏览器会将其识别为不同分组，所以才会出现可以同时选中多个的异常表现

标准单选场景（纯HTML即可修复） #

如果你的需求是同一时间只能选一个年级，符合单选框的常规使用场景，只需要给所有同组单选框设置相同的name属性即可，同时建议补全id和label的for关联属性，实现点击文字也能选中的优化交互，修改后代码如下：

<div id="grade">
    <label id="gradeName">Grade</label>
    <input type="radio" name="grade" id="g5" value="5">
    <label for="g5">5</label>
    <input type="radio" name="grade" id="g6" value="6">
    <label for="g6">6</label>
    <input type="radio" name="grade" id="g7" value="7">
    <label for="g7">7</label>
    <input type="radio" name="grade" id="g8" value="8">
    <label for="g8">8</label>
    <input type="radio" name="grade" id="g9" value="9">
    <label for="g9">9</label>
    <input type="radio" name="grade" id="g10" value="10">
    <label for="g10">10</label>
</div>

需要支持取消选中/多选的场景 #

如果你的需求是选中后点击可取消，或者允许同时选多个，有两种实现方式：

• 优先改用type="checkbox"复选框控件，原生支持多选、点击取消选中的特性，纯HTML即可实现
• 如果必须保留radio的样式，需要额外编写JS逻辑，监听单选框的点击事件，手动切换已选中radio的checked状态。

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