通过单击表格单元格中的任意位置并更改该单元格的背景颜色,勾选表格单元格中的复选框

Question

基本上,我有一个表格,每个单元格都包含一个复选框.我希望能够通过单击单元格内的任何位置来勾选复选框,并更改我已完成的单元格的颜色.

现在的问题是,当我勾选复选框然后取消勾选时,该单元格没有得到那个单元格颜色,就像复选框未被取消时一样,它的单元格颜色应该回到白色.谁能帮我？帮助将受到高度赞赏.

这是我的小提琴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

您可以通过以下代码段完成任务,

尝试,

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

缓存版本

$('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

你可以这样重组

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

演示版