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

我想在HTML

中添加一个

启用所有

复选框，用于切换该

中的所有复选框

我不能让它工作

我的Jquery： 另见

---

更新： 我让它与以下代码一起工作：

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

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

---

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

如果您要放入

选项卡

，那么您不能直接执行

。查找（）

，而是遍历到

t正文

，并使用

类型=复选框

选择所有

输入

，如：

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

同样，我们也要：

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

---

如果您正在输入

thead

，那么您不能直接执行

。查找（）

，而是遍历到

tbody

，并使用

type=checkbox

选择所有

input

，如：

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

同样，我们也要：

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

---

您必须更改代码，如下所示

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（）

超过

$（此）

将不起作用。因此，我们必须使用

.closest（）

来获取父表，并从中获取所有必需的输入复选框元素

---

您使用两个单选按钮设置了相同的id，为单选按钮指定唯一id并使用上述代码

---

您必须更改代码，如下所示

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（）

超过

$（此）

将不起作用。因此，我们必须使用

.closest（）

来获取父表，并从中获取所有必需的输入复选框元素

---

您使用两个单选按钮设置了相同的id，为单选按钮指定唯一id并使用上述代码

---

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

var elementName = 'TestName';

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

---

（另请参见）

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

var elementName = 'TestName';

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

（另请参见）

尝试以下方法：

$(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);
}

}))

试试这个：

$(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);
}

---

---

}))

它可以工作，但如果我想像@EdinPuzic这样同时拥有两个表：只需添加一些ID，就可以了。另外，请确保您的所有ID都是唯一的！看看这里的小提琴-->@JohnSlegers如果有100个表，你会创建100个事件处理程序吗\@JohnSlegers它可以工作，但问题是我在一个页面上会有30多个表。@EdinPuzic为什么不能使用这种方法，因为它可以工作，但是如果我想同时有两个表，就像这样@EdinPuzic:只需添加一些ID，它就可以工作了。另外，请确保您的所有ID都是唯一的！看看这里的小提琴-->@JohnSlegers如果有100个表，你会创建100个事件处理程序吗\@JohnSlegers这是可行的，但问题是我在一页上会有30多个表格。@EdinPuzic既然有效，为什么你不能使用这种方法呢？但如果我想同时有两个表格？@EdinPuzic如果你展示整个页面，最好回答这个问题html@EdinPuzic只需为“全部启用”复选框及其标签指定不同的id即可。检查这个演示@顺便说一句，试着在任何答案中按勾号。因为这将有助于未来的游客为他们找到一个解决方案。这不是一种强迫非常感谢！！：）它是有效的，但如果我想同时拥有两张桌子？@EdinPuzic如果你展示整个桌子，回答这个问题会更好html@EdinPuzic只需为“全部启用”复选框及其标签指定不同的id即可。检查这个演示@顺便说一句，试着在任何答案中按勾号。因为这将有助于未来的游客为他们找到一个解决方案。这不是一种强迫非常感谢！！：）但如果我想在同一时间有两张桌子，我不明白，你说在同一时间有两张桌子是什么意思@像这样，我有两个不同的表和全部启用按钮，我需要分开全部启用按钮。现在，当我点击1号表时，它会启用2号表，但如果我想同时拥有2个表，我不明白，你说的同时拥有2个表是什么意思@像这样，我有两个不同的表和全部启用按钮，我需要分开全部启用按钮。现在，当我单击表1时，它也会启用表2