當選擇另一個選項時刪除單選按鈕上的默認選中選項

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>