更改复选框列表项样式

Change CheckBoxList item style

本文关键字：样式 列表 复选框      更新时间：2023-09-26

我在 ASP.NET 中使用CheckBoxList有应用程序：

<asp:CheckBoxList runat="server" ID="myCheckBoxList">
    <asp:ListItem Text="1 16" />
    <asp:ListItem Text="1 17" />
    <asp:ListItem Text="2 20" />
</asp:CheckBoxList>

我想在单击按钮后更改所选元素的样式。为此，我有JavaScript功能：

function changeColor() {
    var checkBoxList = document.getElementById("myCheckBoxList");
    var options = checkBoxList.getElementsByTagName('input');
    for (var i = 0; i < options.length; i++) {
        console.log(options[i].checked);
        if (options[i].checked) {
            options[i].parentElement.className = 'Red';
        }
    }
}

当我单击按钮时，所选项目会在很短的时间内（约 0,5 秒）更改其颜色，然后它们恢复为默认的黑色。为什么我的复选框列表项样式重置？我不希望这种行为。如何更改我的代码以永久更改颜色（不仅仅是 0,5 秒）？

这是完整的解决方案：

<script type="text/javascript">
    function changeColor() {
        var checkBoxList = $('[id$="myCheckBoxList"]');
        var options = checkBoxList[0].getElementsByTagName('input');
        for (var i = 0; i < options.length; i++) {
            console.log(options[i].checked);
            if (options[i].checked) {
                options[i].parentElement.className = 'Red';
            }
        }
        return false;
    }
</script>
<asp:CheckBoxList runat="server" ID="myCheckBoxList">
    <asp:ListItem Text="1 16" />
    <asp:ListItem Text="1 17" />
    <asp:ListItem Text="2 20" />
</asp:CheckBoxList>
<asp:Button OnClientClick="return changeColor();" Text="Test" runat="server" />

我已经使用 jQuery 本地化了 myCheckBoxList，因为如果您使用的是母版页，它在浏览器中可以具有不同的 Id。其次，我从函数中返回 false 以防止按钮单击时回发以维护类值。

相关文章：