HTML表单中Radio buttons单选按钮无法正常切换问题求助

嘿，我一眼就发现问题所在啦！这绝对不是Microsoft Edge浏览器的问题，完全是代码里的一个小疏忽导致的～

核心问题：单选按钮的分组规则 #

HTML里的单选按钮（Radio buttons）要实现“选中一个自动取消另一个”的互斥效果，必须满足一个关键条件：同一组的所有单选按钮必须拥有相同的name属性值。浏览器正是通过name属性来识别哪些按钮属于同一组的。

看一下你写的代码：

<form> 
<label for="html">This one is Html </label> 
<input type="radio" name="html" id="html" value="HTML"> 
<br> 
<label for="css">This one is Css</label> 
<input type="radio" name="css" id="css" value="CSS"> 
<br> 
<label for="javscript">This one is Javascript</label> 
<input type="radio" name="javscript" id="javascript" value="JAVASCRIPT"> 
</form>

你给三个单选按钮分别设置了不同的name值：html、css、javscript，浏览器会把它们当成三个完全独立的单选组，自然不会出现互斥效果。另外还有个小细节：第三个<label>的for属性拼写是javscript，但对应的<input>的id是javascript（多了个'a'），这会导致点击这个标签时无法选中对应的单选按钮，也一起修正啦。

修正后的代码 #

把三个单选按钮的name统一改成同一个值（比如language），同时修正标签的拼写错误：

<form> 
<label for="html">This one is Html </label> 
<input type="radio" name="language" id="html" value="HTML"> 
<br> 
<label for="css">This one is Css</label> 
<input type="radio" name="language" id="css" value="CSS"> 
<br> 
<label for="javascript">This one is Javascript</label> 
<input type="radio" name="language" id="javascript" value="JAVASCRIPT"> 
</form>

现在再测试一下，选中其中一个选项后，另一个就会自动取消勾选啦～

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