如何将表格与他的复选框连接起来?

Question

如果我按第一个复选框，我想选中第一个表格中的所有复选框，如果我按第二个复选框，我想选中第二个表格中的所有复选框，但是当我按第一个或第二个复选框时，它会在两个表中选中所有

复选框

function checkAll(t,ele) {
var table= document.getElementById(t);
var checkboxes = ("table td input[type=checkbox]");
if (ele.checked) {
for (var i = 0; i < checkboxes.length; i++) {
console.log(i)
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = true;
}
}
} else {
for (var i = 0; i < checkboxes.length; i++) {
console.log(i)
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = false;
}
}
}
}

Answer 1

您可以按类名获取表中的所有复选框

document.getElementById("tableId").getElementsByClassName("checkboxclass");

完整片段如下：

document.getElementById('toggleOnFirst').onclick = function(){
	checkAll('firstTable', true)
}
document.getElementById('toggleOffFirst').onclick = function(){
	checkAll('firstTable', false)
}
document.getElementById('toggleOnSecond').onclick = function(){
	checkAll('secondTable', true)
}
document.getElementById('toggleOffSecond').onclick = function(){
	checkAll('secondTable', false)
}
function checkAll(table, status) {
// Get all checkboxes by class within a table
	var checkboxes = document.getElementById(table).getElementsByClassName("check");

// Loop all checkboxes and check / uncheck them
for (var i = 0; i < checkboxes.length; i++) {
	var checkbox = checkboxes[i]
	checkbox.checked = status;
}

}

<table id="firstTable" style="width:100%" >
<tr>
<td> <input type="checkbox" class="check" name="check" value="0"></td>
</tr>
<tr>
<td> <input type="checkbox" class="check" name="check" value="0"></td>
</tr>  
<tr>
<td> <input type="checkbox" class="check" name="check" value="0"></td>
</tr>
</table> 
<button id="toggleOnFirst">
Toggle on
</button>
<button id="toggleOffFirst">
Toggle off
</button>
<table id="secondTable" style="width:100%" >
<tr>
<td> <input type="checkbox" class="check" name="check" value="0"></td>
</tr>
<tr>
<td> <input type="checkbox" class="check" name="check" value="0"></td>
</tr>  
<tr>
<td> <input type="checkbox" class="check" name="check" value="0"></td>
</tr>
</table> 
<button id="toggleOnSecond">
Toggle on
</button>
<button id="toggleOffSecond">
Toggle off
</button>