Change checkbox background color on checkbox check and uncheck

I have a checkbox inside a gridview and I want to change the backcolor of that checkbox on check and uncheck.

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

I used a jquery for the purpose but it’s not working.

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Check this fiddle

HTML(sample):

<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');
});

Method 2

Try this:

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

You can also use background-color property of CSS instead of background, but background takes precedence over background-color.

Method 3

Try this approach in your answer.

$(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", "");
            });
        });

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0