GridView单选Checkbox行颜色切换功能实现求助

首先定义用于标记选中行的CSS样式，添加到页面的<style>标签中：

.selected-row {
    background-color: #e6f7ff; /* 可根据需求自定义选中行颜色 */
}
.box-table-a tr {
    background-color: #ffffff; /* 设置行默认背景色，确保取消勾选时能还原 */
}

然后修改JavaScript函数，加入行颜色切换的逻辑：

function SingleCheckboxCheck(ob) {
    // 获取当前复选框所在的GridView行
    var currentRow = ob.closest('tr');
    // 获取GridView内所有复选框
    var allCheckboxes = document.querySelectorAll('#grdHolidayDetails input[type="checkbox"]');

    if (ob.checked) {
        // 勾选状态：为当前行添加选中样式
        currentRow.classList.add('selected-row');
        // 遍历所有复选框，取消其他已勾选项并移除对应行的选中样式
        allCheckboxes.forEach(function(checkbox) {
            if (checkbox !== ob && checkbox.checked) {
                checkbox.checked = false;
                checkbox.closest('tr').classList.remove('selected-row');
            }
        });
    } else {
        // 取消勾选状态：移除当前行的选中样式
        currentRow.classList.remove('selected-row');
    }
}

关键说明 #

• 用closest('tr')替代多层parentNode，更稳定地定位GridView行元素，避免DOM结构变化导致的定位失效
• 通过CSS类控制行样式，比直接修改style属性更易于维护和调整
• 同步处理复选框状态与行样式：勾选时给当前行加样式，同时清除其他行的勾选状态和样式；取消勾选时直接移除当前行的选中样式

内容的提问来源于stack exchange，提问作者Arnab Sarkar