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.

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

Solution 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.

Solution 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+