使用jQuery切换（启用/禁用）HTML表格中的所有复选框

Question

我想在HTML Enable all中添加<table>复选框，切换<table>内的所有复选框。

我无法让它发挥作用。

我的Jquery：

var elementName = 'TestName';

$('input[familyname="TestName"]').on('click', function() {
    if ($("input[familyname='" + elementName + "']").is(':checked')) {
        $(this).find('tr').nextAll('tr').find('input').prop('checked', true);
    } else {
        $(this).find('tr').nextAll('tr').find('input').prop('checked', false);
    }
});

另见this Fiddle。

更新

我让它使用这段代码：

var elementName = 'TestName';
var $checkboxes = $('.table-list').find('input'); 

$('input[familyname="TestName"]').on('click', function() {
    $checkboxes.prop('checked', $(this).is(':checked'));
});

但是，当我想添加更多表格时会出现错误。请参阅this Fiddle。

Answer 1

您必须更改以下代码，

var elementName = 'TestName';
$('input[familyname="' + elementName + '"]').on('click', function() {
  var elems = $(this).closest('table.table').find('tr input');
  elems.prop('checked', this.checked)
});

tr在我们的上下文中是父级，因此.find()超过$(this)将无法解决问题。所以我们必须使用.closest()来获取父表，然后我们可以获取所有必需的输入 - 复选框元素。

DEMO

您使用两个单选按钮设置相同的ID，为单选按钮提供唯一ID并使用上述代码。

DEMO

Answer 2

如果你输入thead，那么你就不能直接.find()转而使用tbody并选择所有input type=checkbox ，像：

 $(this).closest("table").find('tbody input[type=checkbox]').prop('checked', true);

同样如此：

 $(this).closest("table").find('tbody input[type=checkbox]').prop('checked', false);

Answer 3

这是实现所需效果的简单但最佳的方式，适用于任意数量的复选框组：

var elementName = 'TestName';

$('input[familyname="' + elementName + '"]').on('click', function(e) {
    $(this)
        .closest('.table-list')
        .find('input')
        .prop('checked', this.checked);
});

（另见this Fiddle）

Answer 4

试试这个：

$(document).on('click', '#switchall1', function() {

if ($(this).is(':checked')) {
    $(this).closest('table').find('tbody tr input').prop('checked', true);

}
else {
    $(this).closest('table').find('tbody tr input').prop('checked', false);
}

}）;