ASP.NET RadioButton ClientID 不同於 Server ID：JavaScript 正確獲取客戶端 ID 方法

ASP.NET RadioButton 伺服端 ID 為 RadioButton1，但渲染到瀏覽器的 HTML id 屬性通常被 NamingContainer 前綴修改 (如 ctl00_ContentPlaceHolder1_RadioButton1)，導致 document.getElementById("RadioButton1") 找不到元素。

現象

// ASPX
<asp:RadioButton ID="RadioButton1" runat="server" />

// 渲染後 HTML (範例)
<input id="ctl00_MainContent_RadioButton1" type="radio" name="ctl00$MainContent$RadioButton1" />

// JS 錯誤
document.getElementById("RadioButton1") // null

解決方案

方案一：ClientIDMode="Static" (ASP.NET 4.0+)

<asp:RadioButton ID="RadioButton1" runat="server" ClientIDMode="Static" />
// 渲染 id="RadioButton1"，JS 直接用 "RadioButton1"

• 優點：簡單、ID 可預測。
• 缺點：重複控件 (如 Repeater 內) 會產生重複 ID，違反 HTML 標準。

方案二：伺服端輸出 ClientID 到 JS 變數 (通用、安全)

<script>
  var rb1Id = '<%= RadioButton1.ClientID %>';
  var rb2Id = '<%= RadioButton2.ClientID %>';
  function shows(...) {
      if (document.getElementById(rb1Id).checked) { ... }
  }
</script>

方案三：用 CSS Class + querySelectorAll (不依賴 ID)

<asp:RadioButton ID="RadioButton1" runat="server" CssClass="myRadio" />
<asp:RadioButton ID="RadioButton2" runat="server" CssClass="myRadio" />

<script>
  var radios = document.querySelectorAll('.myRadio');
  radios.forEach(function(r) { if (r.checked) { ... } });
</script>

方案四：jQuery 選擇器 (若已引用)

var $rb1 = $('#<%= RadioButton1.ClientID %>');
// 或屬性開頭匹配
var $rb = $('input[id$="_RadioButton1"]');

Panel 嵌套影響

Panel 也是 INamingContainer，會進一步增加前綴層級，更加劇 ID 不確定性。方案二、三、四均不受影響。

建議：新專案啟用 ClientIDMode="Predictable" (站點級) 配合方案二輸出關鍵 ID，舊專案用方案三 Class 選擇器最穩健。