您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> ASP.NET 基礎 >> ASP.NET 基礎

RadioButtonList / CheckBoxList 滑鼠懸停特效：純前端 JS + CSS 實現 Item 級互動

編輯：ASP.NET 基礎

需求與挑戰

ASP.NET `RadioButtonList` 與 `CheckBoxList` 渲染為 `

` + `` + `` 結構。原生控件不支援 Item 級 `onmouseover`/`onmouseout` 事件。若在伺服端為每個 `ListItem` 加屬性，會產生大量內聯腳本且難以維護。**最佳做法：頁面載入後，用 JavaScript 統一掛載事件委派給所有 `` 元素。**

資料模型與後端綁定

// 實體類別
public class FivePhase
{
    public int ID { get; set; }
    public string Name { get; set; }
    public FivePhase() { }
    public FivePhase(int id, string name) { ID = id; Name = name; }
}

// 後端綁定邏輯
private List GetFivePhases()
{
    return new List
    {
        new FivePhase(1, "木"),
        new FivePhase(2, "火"),
        new FivePhase(3, "土"),
        new FivePhase(4, "金"),
        new FivePhase(5, "水")
    };
}

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        rblPhases.DataSource = GetFivePhases();
        rblPhases.DataTextField = "Name";
        rblPhases.DataValueField = "ID";
        rblPhases.DataBind();
    }
}

ASPX 標記

<asp:RadioButtonList ID="rblPhases" runat="server" RepeatDirection="Horizontal"></asp:RadioButtonList>
<!-- 或 CheckBoxList -->
<asp:CheckBoxList ID="cblPhases" runat="server" RepeatDirection="Horizontal"></asp:CheckBoxList>

CSS 樣式：定義懸停與預設狀態

<style>
.phase-label { cursor: pointer; padding: 4px 8px; transition: all 0.2s; }
.phase-label:hover,
.phase-label.overStyle { font-weight: bold; color: #e74c3c; background: #fef9e7; border-radius: 4px; }
.phase-label.outStyle { font-weight: normal; color: #2c3e50; background: transparent; }
</style>

JavaScript：統一事件委派 (推薦寫法)

<script>
// 通用函式：為指定控件的所有 label 掛載 hover 效果
function bindListHover(listClientId) {
    const container = document.getElementById(listClientId);
    if (!container) return;

    // 使用事件委派：只在容器掛一個 mouseover/mouseout
    container.addEventListener('mouseover', e => {
        const label = e.target.closest('label');
        if (label) label.classList.add('overStyle');
    });

    container.addEventListener('mouseout', e => {
        const label = e.target.closest('label');
        if (label) label.classList.remove('overStyle');
    });
}

// 頁面載入後初始化
document.addEventListener('DOMContentLoaded', () => {
    bindListHover('<%= rblPhases.ClientID %>');
    bindListHover('<%= cblPhases.ClientID %>');
});
</script>

進階：支援 UpdatePanel 部分更新

若控件在 `UpdatePanel` 內，非同步回發後 DOM 會重建，需重新綁定：

function bindListHover(listClientId) { ... } // 同上

// 全域函式供 PageRequestManager 呼叫
function rebindAllHovers() {
    bindListHover('<%= rblPhases.ClientID %>');
    bindListHover('<%= cblPhases.ClientID %>');
}

// 初始綁定
document.addEventListener('DOMContentLoaded', rebindAllHovers);

// UpdatePanel 回發後重新綁定
if (typeof Sys !== 'undefined' && Sys.WebForms.PageRequestManager) {
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(rebindAllHovers);
}

原理說明：渲染後的 HTML 結構

<table id="rblPhases">
  <tr>
    <td><input id="rblPhases_0" type="radio" name="rblPhases" value="1" /><label for="rblPhases_0">木</label></td>
    <td><input id="rblPhases_1" type="radio" name="rblPhases" value="2" /><label for="rblPhases_1">火</label></td>
    ...
  </tr>
</table>

JS 透過 `closest('label')` 精準找到使用者滑過的標籤，切換 CSS 類別即可實現視覺回饋，無需修改伺服端代碼，符合關注點分離原則。