在复选框选中和取消选中更改复选框背景颜色答案

【问题标题】：Change checkbox background color on checkbox check and uncheck在复选框选中和取消选中更改复选框背景颜色
【发布时间】：2018-02-14 11:07:03
【问题描述】：

我在 gridview 中有一个复选框，我想在选中和取消选中时更改该复选框的背景色。

<asp:TemplateField HeaderText="Status">
    <ItemTemplate>
        <asp:CheckBox ID="checkboxAttendanceStatus" ClientIDMode="Static" BackColor="red" runat="server" />
    </ItemTemplate>
</asp:TemplateField>

我为此目的使用了一个 jquery，但它不起作用。

<script>
    $(document).ready(function () {
        $('#checkboxAttendanceStatus').change(function () {
            alert('asdas');
            $("#checkboxAttendanceStatus").css("backcolor", "green");
        });
    });
</script>

【问题讨论】：

首先检查实际 HTML 中 CheckBox 的 ID...
ID 正确。上面的html代码我也贴出来了。
可以分享一下生成的HTML吗？
再次，您是否检查了正在生成的实际 HTML。不是您在编辑器中看到的代码。如果你这样做了，你会发现它们不一样。
是的，我使用了 ClientIDMode="Static"。这样做之后，我收到了警报消息，但只是针对网格视图的第一个条目。再一次，根本没有颜色变化。

标签： javascript jquery asp.net

【解决方案1】：

查看fiddle

HTML（示例）：

<div id="div">
    <input type="checkbox" id="chk">
</div>

JS：

$('#chk').on('change', function(){
    if($('#chk').prop('checked'))
       $('#div').css('background', 'green');
     else
       $('#div').css('background', 'red');
});

【讨论】：

检查你的网格视图记录的所有id，我给出的例子是1个静态记录。
所有的ID都是静态的。
为网格中的几行提供html 结构。这样我就可以给你准确的JS
我得到了 jquery 来更改颜色，但我无法保留页面回发的颜色。
那么check & uncheck 你在发布数据吗？

【解决方案2】：

试试这个：

<script>
    $(document).ready(function () {
        $('#checkboxAttendanceStatus').change(function () {
            $("#checkboxAttendanceStatus").css("background", "green");
        });
    });
</script>

您也可以使用 CSS 的background-color 属性来代替background，但background 优先于background-color。

【讨论】：

您可以使用@NnN的if-else JS块在取消选中时将其变回红色。
背景没有改变复选框背景。

【解决方案3】：

在您的答案中尝试这种方法。

$(document).ready(function () {
            $("#GridView1").children("tbody").find("tr").click(function () {
                if ($(this).attr("class") == "highlightedRow")
                {
                    $(this).removeClass("highlightedRow");
                }
                else
                {
                    $(this).addClass("highlightedRow");
                    $(this).siblings("tr.highlightedRow").removeClass("highlightedRow");
                }
            }).mouseover(function () {
                $(this).css("background", "Red");
            }).mouseout(function () {
                $(this).css("background", "");
            });
        });

来源：https://forums.asp.net/t/1701337.aspx?change+asp+gridview+row+backcolor+in+javascript+

【讨论】：

我不想要这个。我想在单击该复选框时更改复选框颜色。