选择另一个选项时删除单选按钮上的默认选中选项答案

【问题标题】：Remove Default Checked Option on Radio Button when Another Option is Selected选择另一个选项时删除单选按钮上的默认选中选项
【发布时间】：2017-11-18 06:16:00
【问题描述】：

如果我在 HTML 中使用单选按钮并希望默认选项显示为选中状态，我使用了 'checked' 属性来实现这一点。我如何做到这一点，当我检查单选按钮上的另一个选项时，这个默认选项会被删除。在下面的代码中，当您选中另一个选项时，原始选项仍然存在并且您无法取消选中任何内容？

在下面的选项中，fish 选项是添加了“checked”属性的选项。

https://codepen.io/pen/?editors=1010

HTML

<input type="radio" id="dog"name="dog"value="dog"><label for="dog">Dog</label>
<input type="radio"  id="cat" name="cat" value="cat"><label for="cat">Cat</label>
<input type="radio"  id="fish" name="fish" value="fish" checked><label for="fish">Fish</label>
<input type="submit">

【问题讨论】：

标签： html forms checkbox

【解决方案1】：

您的表单单选元素需要具有共享名称属性，因为它们是一种选择。将名称更改为“foo”或“animal”和它会起作用的。

<div style="margin-bottom:15px;">All radio inputs require a shared name attribute, I declared it "choice"</div>

<form style="text-align:center">
<input type="radio" id="dog"name="choice"value="dog"><label for="dog">Dog</label>
<input type="radio"  id="cat" name="choice" value="cat" ><label for="cat" >Cat</label>
<input type="radio"  id="fish" name="choice" value="fish" checked="checked" ><label for="fish" >Fish</label>
<input type="submit">
</form>

【讨论】：