在Web開發中，經常需要使用單選框來實現用戶的選擇。而在JavaScript中，我們可以通過操作DOM來設置單選框的選項。本文就來介紹如何使用JavaScript操作DOM設置單選框的選項。 在HTML中創建單選框通常使用input標簽，并設置type為"radio"。例如：

<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female

上面的代碼創建了兩個單選框，分別采用了相同的name屬性，但是value屬性不同。當用戶選擇其中一個單選框時，就會提交該單選框的value值到服務器。 在JavaScript中，我們可以通過document對象獲取單選框元素，并設置其checked屬性來選中相應的選項。例如：

var maleRadio = document.getElementsByName("gender")[0];
maleRadio.checked = true;

上面的代碼通過getElementsByName()方法獲取name屬性為"gender"的所有元素，然后通過下標訪問第一個元素，并設置其checked屬性為true，選中了"Male"這個選項。 如果我們需要取消某個單選框的選中狀態，只要將其checked屬性設置為false即可。例如：

var femaleRadio = document.getElementsByName("gender")[1];
femaleRadio.checked = false;

上面的代碼獲取name屬性為"gender"的所有元素，然后通過下標訪問第二個元素，并設置其checked屬性為false，取消了"Female"這個選項的選中狀態。 通常情況下，我們需要在用戶點擊單選框時切換其選中狀態。可以通過addEventListener()方法來為單選框添加click事件處理函數。例如：

var maleRadio = document.getElementsByName("gender")[0];
maleRadio.addEventListener("click", function() {
if (this.checked) {
// 選中
} else {
// 取消選中
}
});

上面的代碼為name屬性為"gender"的第一個單選框添加了click事件處理函數。當用戶點擊該單選框時，該函數會判斷其checked屬性是否為true，從而確定是選中了該單選框還是取消了選中。 除了設置單選框的選項，還可以獲取當前選中的單選框的值。可以遍歷所有name屬性為"gender"的單選框，檢查其checked屬性，從而確定哪個單選框被選中了。例如：

var genderRadios = document.getElementsByName("gender");
var selectedValue;
for (var i = 0; i< genderRadios.length; i++) {
if (genderRadios[i].checked) {
selectedValue = genderRadios[i].value;
break;
}
}

上面的代碼遍歷了所有name屬性為"gender"的單選框，檢查其checked屬性，從而找到被選中的單選框，并獲取其value值。如果沒有單選框被選中，則selectedValue為undefined。 綜上所述，通過JavaScript操作DOM設置單選框的選項是非常簡單的。我們可以利用checked屬性來選中或取消選中單選框，利用click事件處理函數來響應用戶的點擊操作，利用value屬性來獲取當前選中的單選框的值。