Tick a checkbox in a table cell by clicking anywhere in the table cell and change background color of that cell

Question

Basically, I have a table with each cell containing a checkbox. I want to be able to tick the checkbox by clicking anywhere within the cell and change the color of that cell which I have done.

Now the problem is that when I tick the checkbox and then untick it, that cell is not getting that cell color back, as in the when the checkbox is unticked its cell color should be back to white. Can anyone help me? Help would be highly appreciated.

Here is my fiddle http://jsfiddle.net/UcDMW/50/

$(function () {
    $('table tr td').on('click', function (e) {
        if (e.target.type == "checkbox") {
            if ($(this).is(':checked')) {
                $(this).attr('checked', false);
                $(this).css('background-color', 'white');

            } else {
                $(this).attr('checked', true);
                $(this).css('background-color', '#DFF0D8');
            }
            return;
        } else {
            if ($(this).find('input:checkbox').is(':checked')) {
                $(this).css('background-color', 'white');

                $(this).find('input:checkbox').attr('checked', false);

            } else {
                $(this).find('input:checkbox').attr('checked', true);
                $(this).css('background-color', '#DFF0D8');

            }
        }
    });
});

Answer 1

You can simply accomplish your task by the following snippet,

Try,

$('table tr td:has(:checkbox)').on('click', function (e) {
    $(this).toggleClass('className');
    if($(e.target).is(':checkbox')){ return; }
    var checked = $(this).find(':checkbox')[0].checked;
    $(this).find(':checkbox')[0].checked = !checked;
});

Cached version

$('table tr td:has(:checkbox)').on('click', function (e) {
    $(this).toggleClass('className');    
    if($(e.target).is(':checkbox')) return;
    var checkBox = $(this).find(':checkbox')[0];
    checkBox.checked = !checkBox.checked;
});

DEMO

Answer 2

You could restructure like this

$('table tr td').on('click', function(e){
    var checkbox = $(this).find('input:checkbox');
    if (!$(e.target).is(':checkbox')) {
        checkbox.prop('checked', !checkbox.is(':checked'));
    }
    $(this).css('background-color', checkbox.is(':checked')?'#DFF0D8':'white');
});

DEMO

Answer 3

You can change your js to this:

working demo

EDIT: now working also when clicking on td cells.

   $(function(){

        bindCells();
    });

    function bindCells() {
        $('table tr td').on('click', function (e) {
            var check = (e.target.type=="checkbox") ? e.target : $(this).find("input:checkbox").get(0);
            $(check).attr('checked', !check.getAttribute('checked'));
            $(this).css('background-color', (check.checked) ? '#DFF0D8' : "#FFFFFF");
        });
    }

Answer 4

alert($(this).is(':checked')); Use it and check the value. It returns false when you check or uncheck the box. This because you use isChecked on table elements(table,tr,td)

Change

if ($(this).is(':checked')) {

in line 4 to

if ($(e.target).is(':checked')) {