asp：选中或未选中时复选框颜色变化答案

【问题标题】：asp:checkbox color change when checked or uncheckedasp：选中或未选中时复选框颜色变化
【发布时间】：2018-06-30 09:51:05
【问题描述】：

我在 GridView 中有一个复选框，我想在未选中时将其颜色更改为 red，在选中时更改为 green。

我该怎么做？

<ItemTemplate>
   <asp:CheckBox ID="checkboxAttendanceStatus" BackColor="Red" runat="server" AutoPostBack="true" />
</ItemTemplate>

【问题讨论】：

您的复选框在被选中后是否回发？
是的，它设置为自动回发。

标签： javascript jquery css asp.net

【解决方案1】：

您可以为复选框设置OnCheckChanged 服务器端事件，如下面的标记所示。然后，您只需在服务器端事件中编写代码来更改BackColor。

标记

<ItemTemplate>
   <asp:CheckBox ID="checkboxAttendanceStatus" BackColor="Red" runat="server"
        AutoPostBack="true" OnCheckedChanged="checkboxAttendanceStatus_CheckedChanged"/>
</ItemTemplate>

服务器端事件的 C# 代码

protected void checkboxAttendanceStatus_CheckedChanged(object sender, EventArgs e)
{
    CheckBox chk = sender as CheckBox;
    if (chk.Checked)
    {
        chk.BackColor = System.Drawing.Color.Green;
    } else
    {
        chk.BackColor = System.Drawing.Color.Red;
    }
}

另一种使用客户端代码而不使用任何 C# 的方法

如果您想在客户端完全实现此要求，则可以将以下 JavaScript 添加到您的 aspx 页面。

您无需订阅复选框的 CheckChanged 事件，也无需编写任何 C# 代码。这种方法只需要 JavaScript/jQuery 代码。

<script type="text/javascript">
function pageLoad() {

    var checkboxes = $("[id*='checkboxAttendanceStatus']");

    checkboxes.each(function (i) {
        if (this.checked) {
            $(this).parent().css("background-color", "green");
        } else {
            $(this).parent().css("background-color", "red");
        }
    });
}
</script>

【讨论】：

客户端方法不起作用。如何调用 pageLoad() ？
在 ASP.Net 中，您不必从 ASP 开始调用 pageLoad 方法。一旦页面脚本加载完毕并创建了所有对象，Net 框架将自动调用它。您可以在此 MSDN 链接上阅读更多相关信息：msdn.microsoft.com/en-us/library/bb383829.aspx
另外，请确保 jquery 包含在 aspx 页面中，否则客户端方法将不起作用。

【解决方案2】：

最简单的方法是将 CSS 与标签的相邻兄弟选择器一起使用，因为生成的 html 将如下所示：

<input id="id" type="checkbox" name="id" /><label for="id">Label</label>

所以根据 CheckBox 的选中状态设置label 的颜色。

<style>
    input[type="checkbox"]:checked + label {
        color: blue;
        background-color: yellow;
    }

    input[type="checkbox"] + label {
        color: red;
        background-color: green;
    }
</style>

如果您想为实际的复选框设置样式，您将需要一个 jQuery 插件或更复杂的 CSS 技巧。看到这个answer here

【讨论】：