Question

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

现在的问题是，当我勾选复选框然后取消勾选时，该单元格没有获得该单元格颜色，就像未选中复选框时，其单元格颜色应该返回白色。谁能帮我？帮助将受到高度赞赏。

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

您可以像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

您可以将您的js更改为：

working demo

编辑：现在也在点击td单元格时工作。

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

警报（$（本）。是（ '：检查'））;使用它并检查值。选中或取消选中该框时，它返回false。这是因为你在表元素（table，tr，td）上使用isChecked

更改

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

在第4行到

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

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

4 个答案:

DEMO