Question

我希望复选框在直接点击时检查/取消选中，或者当点击任何没有类valueButton的表格单元格时。

目前他们第一次工作，然后他们不再工作，因为复选框没有像最初那样被选中/取消选中。

这是我的（错误的）CSS和HTML代码：

这里只是Javascript：

    jQuery(document).ready(function() {

        $(document).on({
            mouseenter: function () {
                $("td:not('.valueButton')", $(this).parent()).addClass('blueHover');
            },
            mouseleave: function () {
                $("td:not('.item')", $(this).parent()).removeClass('blueHover');
            },
            click: function () {
                $("td:not('.valueButton')", $(this).parent()).toggleClass('blueChecked');

                if (event.target.type !== 'checkbox') {
                    $(':checkbox', $(this).parent()).attr('checked', function() {
                        return !this.checked;
                    });
                }
            }
        }, "tr.item td:not('.valueButton')");

    });

Answer 1

请检查控制台是否有错误。

的参考错误

if (event.target.type !== 'checkbox') {

因为您没有将event作为参数添加到

中

click: function ()

代码需要

$(document).on({
mouseenter: function () {
    $("td:not('.valueButton')", $(this).parent()).addClass('blueHover');
},
mouseleave: function () {
    $("td:not('.item')", $(this).parent()).removeClass('blueHover');
},
click: function (event) {
    $("td:not(:eq(1))", $(this).parent()).toggleClass('blueChecked');

    if (event.target.type !== 'checkbox') {
        if($(':checkbox', $(this).parent()).prop('checked'))
            $(':checkbox', $(this).parent()).prop('checked', false);
        else
            $(':checkbox', $(this).parent()).prop('checked',true);
    }
}
}, "tr.item td:not('.valueButton')");

UPDATED FIDDLE

有功能

$(':checkbox', $(this).parent()).prop('checked', function(){
  return !$(this).prop("checked");
});

单击某些区域时切换复选框

1 个答案: