javascript - ASP :checkbox color change when checked or unchecked

Question

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

我该怎么做？

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

Answer 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>