Question

我在第一列中有一个带有复选框的表，在标题中有一个“全选”复选框。当我选中一个复选框时，我需要更改行颜色。

var $tbl = $('#tbl');
var $bodychk = $tbl.find('tbody input:checkbox');

$(function () {
    $bodychk.on('change', function () {
        $(this).closest('tr').toggleClass('hilite');
    });

    $tbl.find('thead input:checkbox').change(function () {
        var c = this.checked;
        $bodychk.prop('checked', c);        
    });
});

如果选择单个框，则行会更改颜色
如果您点击“全选”框，则会切换其他复选框。

但我不能让两者一起工作。的 See here

这些问题很接近，但没有完全回答可能出错的问题......

Change class of tr if checkbox is selected

Jquery "select all" checkbox

Answer 1

只需在单个复选框中添加相同的行：

$bodychk.prop('checked', c).closest("tr").toggleClass('hilite');

FIDDLE

您仍然找到了tbody > input:checkbox，因此您仍然可以退回到父tr并切换课程

Answer 2

这样的事情？ http://jsfiddle.net/hb6cx0tn/9/

var $tbl = $('#tbl');
var $bodychk = $tbl.find('tbody input:checkbox');

$(function () {
    $bodychk.on('change', function () {
        if($(this).is(':checked')) {
            $(this).closest('tr').addClass('hilite');
        }
        else {
            $(this).closest('tr').removeClass('hilite');
        }
    });

    $tbl.find('thead input:checkbox').change(function () {
        var c = this.checked;
        $bodychk.prop('checked', c);
        $bodychk.trigger('change'); 
    });
});

我选择不使用切换，因为它不会确保选中该复选框以便突出显示该项目。

行$bodychk.trigger('change');会导致.change()事件触发，因此您只是不向该元素添加类，而您实际上是在触发元素的检查。< / p>

jQuery复选框选择全部并更改选择的背景颜色

2 个答案: