javascript - 使用 jQuery 切换(启用/禁用)HTML 表中的所有复选框

Question

我想添加 Enable all HTML 中的复选框 <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