JavaScript 單選按鈕 在前端網頁開發過程中，單選按鈕是一個非常重要的組件。它是用戶在多個選項中選擇一個的最常用方式之一。JavaScript 提供了一些方法和事件來操作和控制單選按鈕的行為和狀態。 首先，我們看看如何創建一個單選按鈕。我們可以使用 HTML 中的 input 標簽，type 屬性設置為 "radio"，name 屬性設置為相同的名稱，value 屬性設置不同的值，這樣就可以創建多個單選按鈕了。我們還可以給單選按鈕添加標簽，方便用戶了解選項的含義，代碼如下：

Option 1Option 2Option 3

然后，我們來看看如何獲取單選按鈕的值?？梢允褂?JavaScript 的 document.getElementsByName 方法獲取相同名稱的單選按鈕組，然后迭代每個單選按鈕來比較它是否被選中，如果被選中，則獲取其值，如下所示：

var radios = document.getElementsByName("group1");
for(var i = 0; i< radios.length; i++) {
if(radios[i].checked) {
console.log(radios[i].value);
break;
}
}

我們還可以使用 onchange 事件來監聽單選按鈕的狀態變化。當用戶選中一個單選按鈕時，該事件將被觸發，我們可以編寫 JavaScript 函數來處理這個事件，例如：

function onRadioButtonChange(radio) {
console.log("Selected value: " + radio.value);
}

HTML 代碼可以修改為如下形式：

Option 1Option 2Option 3

我們還可以通過 JavaScript 的屬性來修改和查詢單選按鈕的狀態。比如，我們可以設置一個單選按鈕為選中狀態：

document.getElementsByName("group1")[0].checked = true;

我們還可以查詢單選按鈕是否被選中：

var radio = document.getElementsByName("group1")[0];
var isChecked = radio.checked;
console.log(isChecked);

除此之外，還有很多其他方法和事件可以操作和控制單選按鈕的行為和狀態，比如 onclick、onfocus、onblur 等事件，以及 disabled、readOnly 等屬性，這些都可以按需使用。 簡而言之，使用 JavaScript 單選按鈕是非常易于操作和控制的，它提供了豐富的方法和事件來滿足不同的需求，開發者可以根據具體的業務場景和設計要求進行靈活運用。