Select 组中 Class 的所有复选框

Question

你好社区我有一个问题，我在 html table 中使用 checkboxes，名称为 table1，我设法 select所有复选框都只有一个，但在放置另一个 table 时，名称相同，名称为 table2，它们的 id 为不同的复选框 Table1，当我单击 select全部，它 select 是两个 table 的复选框，因为我这样做，每个 table select 只是它的复选框？

我在 jquery 中使用此代码 select 来自 table 1:

的所有复选框

 $("#checkbox-bulk-select").click(function () {
        $('input:checkbox').not(this).prop('checked', this.checked);
    });

这来自 table 2:

 $("#checkbox-bulk-select2").click(function () {
            $('input:checkbox').not(this).prop('checked', this.checked);
        });

but it does not take the id, it selects all the checkboxes of both tables

这些是 select 全部的输入：

table1
<input class="custom-control-input" id="checkbox-bulk-select" type="checkbox">

table2
<input class="custom-control-input" id="checkbox-bulk-select2" type="checkbox">

Answer 1

从当前复选框 select 它所在的 table 并使用那个 table 找到其中的所有复选框

$(this).closest('table').find('input:checkbox').not(this).prop('checked', this.checked);

Answer 2

这是我的例子，你的问题变成 $('input:checkbox')
因为，如果您使用 input:checkbox
，jquery 文件会与相同的代码发生冲突所以使用 name="..." 和 jquery 代码，例如 $('input:checkbox[name=table1]')

这个片段

$("#checkbox-bulk-select").click(function () {
        $('input:checkbox[name=table1]').not(this).prop('checked', this.checked);
    }); 

 $("#checkbox-bulk-select2").click(function () {
            $('input:checkbox[name=table2]').not(this).prop('checked', this.checked);
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
table1
    <input class="custom-control-input" id="checkbox-bulk-select" type="checkbox" name="table1">

table2

<input class="custom-control-input" id="checkbox-bulk-select2" type="checkbox" name="table2">

Select 组中 Class 的所有复选框

Select All Checkboxes By Class in goup

html

javascript

checkbox

jquery