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

Question

如果我使用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"> 

Answer 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>