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>

Answer 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

asp：选中或取消选中时复选框颜色更改

2 个答案: