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

【问题标题】：Tick a checkbox in a table cell by clicking anywhere in the table cell and change background color of that cell通过单击表格单元格中的任意位置来勾选表格单元格中的复选框并更改该单元格的背景颜色
【发布时间】：2014-06-25 08:26:25
【问题描述】：

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

现在的问题是，当我勾选复选框然后取消勾选它时，该单元格没有恢复该单元格颜色，因为在取消勾选复选框时，它的单元格颜色应该恢复为白色。谁能帮我？非常感谢您的帮助。

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

            }
        }
    });
});

【问题讨论】：

它对我有用。我在 chrome 上试过了。
@BhushanKawadkar 特别点击复选框，您会注意到问题..
@BhushanKawadkar 选中复选框然后取消选中时无法正常工作，否则在单元格内单击时工作正常
代码可以像这样简单得多jsfiddle.net/UcDMW/55

标签： javascript jquery

【解决方案1】：

你可以通过下面的sn-p简单的完成你的任务，

试试，

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

【讨论】：

【解决方案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

【讨论】：

感谢为我工作，但仅适用于第一轮，无法在第二轮中检查同一单元格的点击。但设法通过将这一行 checkbox.attr('checked', !checkbox.is(':checked')); 更改为 checkbox.prop('checked', !checkbox.is(':checked')); 来完成工作

【解决方案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");
        });
    }

【讨论】：

哦，等等，您希望单击 td 单元格中的任何位置，其行为方式与单击其中的复选框相同？

【解决方案4】：

alert($(this).is(':checked'));使用它并检查值。当您选中或取消选中该框时，它会返回 false。这是因为您在表格元素上使用了 isChecked(table,tr,td)

改变

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

在第 4 行到

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

【讨论】：