HTML radio是一種常見的用戶界面控件,用于在一組選項中選擇一個選項。在HTML中,<input>
標簽具有type屬性為“radio”,用于創建單選按鈕。
<input type="radio" name="gender" value="male"> Male <input type="radio" name="gender" value="female"> Female
以上代碼示例展示了兩個單選按鈕,分別用于選擇性別,其屬性name為“gender”,value分別為“male”和“female”。當用戶單擊其中一個選項時,將選擇它并將其值與name一起提交。
如果我們需要設置默認選中的值,可以通過給其中一個單選按鈕添加checked屬性來實現:
<input type="radio" name="gender" value="male" checked> Male <input type="radio" name="gender" value="female"> Female
以上代碼示例中,單選按鈕Male添加了checked屬性,因此在頁面加載時將默認選中。此外,我們還可以使用JavaScript更改單選按鈕的選中狀態。假設我們有一個表示食品類型的單選按鈕組:
<input type="radio" name="food" value="pizza"> Pizza <input type="radio" name="food" value="burger"> Burger <input type="radio" name="food" value="sushi"> Sushi
我們可以使用以下代碼將單選按鈕設置為選中:
var foodType = "sushi"; document.querySelector('input[name="food"][value="' + foodType + '"]').checked = true;
以上代碼將查找具有name為“food”和value為“sushi”的單選按鈕,并將其選中。
下一篇html put代碼