Question

我在ASP.NET中使用CheckBoxList：

MongoClient

我想在点击按钮后更改所选元素的样式。要做到这一点，我有JavaScript功能：

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

当我点击按钮时，所选项目会在很短的时间内（大约0.5秒）更改颜色，然后再返回默认的黑色。为什么我的checkboxlist项目样式重置？我不想要这种行为。如何更改我的代码以永久更改颜色（不仅仅是0.5秒）？

Answer 1

这是完整的解决方案：

<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以防止按钮点击后回发以保持类值。

更改CheckBoxList项目样式

1 个答案: