GridView 中實現 RadioButton 單選的完整方案

核心挑戰

ASP.NET GridView 內的 RadioButton 因每行產生獨立 name 屬性，瀏覽器無法自動強制單選，需透過 JavaScript 手動管理勾選狀態，並將選中行索引回傳伺服器端。

完整實作

1. GridView 宣告

<asp:GridView ID="gvData" runat="server" AutoGenerateColumns="False" DataKeyNames="Id"
    OnRowDataBound="gvData_RowDataBound">
    <Columns>
        <asp:TemplateField HeaderText="選取">
            <ItemTemplate>
                <asp:RadioButton ID="rbSelect" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Name" HeaderText="名稱" />
        <asp:BoundField DataField="Description" HeaderText="說明" />
    </Columns>
</asp:GridView>
<asp:HiddenField ID="hfSelectedIndex" runat="server" />

2. RowDataBound 註冊點擊腳本

protected void gvData_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        var rb = (RadioButton)e.Row.FindControl("rbSelect");
        if (rb != null)
        {
            // 傳入 ClientID 與 RowIndex
            string script = $"setSingleSelect('{rb.ClientID}', {e.Row.RowIndex});";
            rb.Attributes["onclick"] = script;
        }
    }
}

3. JavaScript 統一管理單選邏輯

<script type="text/javascript">
function setSingleSelect(selectedId, rowIndex) {
    // 1. 記錄選中行索引到 HiddenField
    document.getElementById('<%= hfSelectedIndex.ClientID %>').value = rowIndex;

    // 2. 取得 GridView 內所有 RadioButton
    var grid = document.getElementById('<%= gvData.ClientID %>');
    var inputs = grid.getElementsByTagName('input');

    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type === 'radio') {
            inputs[i].checked = (inputs[i].id === selectedId);
        }
    }
}
</script>

4. 伺服器端取得選中資料

protected void btnConfirm_Click(object sender, EventArgs e)
{
    int index = int.Parse(hfSelectedIndex.Value);
    if (index >= 0 && index < gvData.Rows.Count)
    {
        string id = gvData.DataKeys[index].Value.ToString();
        // 取得該行其他控件值
        var row = gvData.Rows[index];
        string name = ((Label)row.FindControl("lblName")).Text;
        // 業務邏輯...
    }
}

進階優化：使用 jQuery 簡化腳本

// 綁定在 GridView 載入完成後
$('#<%= gvData.ClientID %> input[type=radio]').on('click', function () {
    $('#<%= hfSelectedIndex.ClientID %>').val($(this).closest('tr').index());
    $('#<%= gvData.ClientID %> input[type=radio]').not(this).prop('checked', false);
});

替代方案比較

最佳實務建議

1. 搭配 DataKeyNames 直接取得主鍵，避免隱藏欄位。
2. 若資料量大且分頁，HiddenField 只記錄當前頁索引，翻頁時需清空或重新計算。
3. 考慮使用 UpdatePanel 時，JS 綁定需在 pageLoad 或 EndRequest 重新註冊。
4. 無障礙：為 RadioButton 加上 <label> 或 aria-label。