ASP.NET 中用 JavaScript 判斷 RadioButton 選中狀態的多種方法

在 ASP.NET WebForms 頁面中，RadioButton 渲染為 HTML <input type="radio">，但 ID 可能被修改。本文介紹原生 JS、jQuery 多種獲取選中狀態的方法，並解決 ClientID 模式差異問題。

HTML 渲染結構

<asp:RadioButton ID="RadioButton1" GroupName="Group1" runat="server" Text="選項1" />
<asp:RadioButton ID="RadioButton2" GroupName="Group1" runat="server" Text="選項2" />

渲染後（默認 ClientIDMode="AutoID"）：

<input id="ctl00_ContentPlaceHolder1_RadioButton1" type="radio" name="ctl00$ContentPlaceHolder1$Group1" value="RadioButton1" />
<input id="ctl00_ContentPlaceHolder1_RadioButton2" type="radio" name="ctl00$ContentPlaceHolder1$Group1" value="RadioButton2" />

方法一：原生 JS 通過 ID 獲取（需知 ClientID）

// 需在服務端註冊腳本或使用 <%= RadioButton1.ClientID %>
var rb1 = document.getElementById('<%= RadioButton1.ClientID %>');
if (rb1.checked) { ... }

方法二：原生 JS 通過 name 分組獲取（推薦，無需 ClientID）

function getSelectedRadioValue(groupName) {
    var radios = document.getElementsByName(groupName);
    for (var i = 0; i < radios.length; i++) {
        if (radios[i].checked) return radios[i].value;
    }
    return null;
}
// 使用：傳入渲染後的 name 屬性值
var val = getSelectedRadioValue('ctl00$ContentPlaceHolder1$Group1');

服務端註冊 name：

string groupName = RadioButton1.GroupName; // 需手動構造完整 name
// 或直接在前端硬編碼（不推薦）

方法三：jQuery 選擇器（最簡潔）

// 通過 ID 結尾匹配（需引用 jQuery）
var checked = $('input[id$="RadioButton1"]').is(':checked');

// 通過 name 分組獲取值
var val = $('input[name$="Group1"]:checked').val();

// 遍歷同組 RadioButton
$('input[name$="Group1"]').each(function() {
    if (this.checked) console.log(this.value);
});

方法四：ASP.NET ClientIDMode="Static" 固定 ID

<asp:RadioButton ID="RadioButton1" ClientIDMode="Static" GroupName="Group1" runat="server" />

渲染後 ID 保持 RadioButton1，JS 直接用 document.getElementById("RadioButton1")。注意：同一頁面不能有重複 ID。

最佳實踐建議

1. 優先使用 jQuery name 分組選擇器，不依賴 ClientID，代碼簡潔健壯
2. 若項目禁用 jQuery，用 原生 JS name 分組，服務端輸出 name 到隱藏域或 JS 變量
3. 避免硬編碼 ClientID，維護困難
4. 設置 ClientIDMode="Predictable" 或 "Static" 簡化前後端交互