javascript - 选择所有未触发其各自 .change 功能的复选框
问题描述
我有一个表格,每行都有一个复选框,还有一个标题复选框,可让您全部选中,这与此代码配合得很好:
var idArray = [];
$(function(event, request, settings){
//This method is explained later in the post
//It takes care of storing checked rows into an array
setupStoreSelected();
$(function(){
//Get every checkbox in table body
var $checkboxes = $("tbody").find(":checkbox");
//When checkAll is clicked, check/uncheck every enabled checkbox
$("#checkAll").on("click", function(){
$($checkboxes).not(":disabled").prop('checked', $(this).prop('checked'));
});
//Uncheck global if any individual checkbox is unchecked
$("tbody").on("change", function () {
if (!$(this).prop("checked")) {
$("#checkAll").prop("checked", false);
}
});
});
});
function setupStoreSelected(){
//This selector listens to every checkbox except for the CheckAll
$("input:checkbox:not('#checkAll')").change(function(){
//Get that row's ID value from its column
var id = $(this).closest("tr").find("td.idColumn").text();
//If it is checked now, push that ID into a global array
if($(this).prop("checked")){
idArray.push(id);
console.log("Added ID : " + id);
}
//Search and delete it from array if it gets unchecked
else{
var index = idArray.indexOf(id);
if(index > -1){
idArray.splice(index,1);
console.log("Deleted ID : " + id);
}
}
});
}
table{
border : 1px solid grey;
}
thead{
background-color : silver;
}
td{
text-align : center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" width="20%">
<thead>
<tr>
<th>ID</th>
<th><input type="checkbox" id="checkAll" value="false"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="idColumn">001</td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td class="idColumn">002</td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td class="idColumn">003</td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td class="idColumn">004</td>
<td><input type="checkbox"/></td>
</tr>
</tbody>
</table>
问题是checkAll
复选框不会触发.change(...)
单个复选框的功能,所以它根本不起作用。
如何修改我的代码,以便单个复选框和 checkAll 复选框都存储 ID?
解决方案
最后,这就是我让它工作的方式:
var idArray = [];
$(document).on('change', '#checkAll', function(e) {
var checkboxes = $('tbody').find(':checkbox').not(":disabled");
if($(this).is(':checked')) {
checkboxes.prop('checked', true);
checkboxes.each(
function() {
checkTerminal($(this).closest("tr").find("td.idColumn").text());
}
);
} else {
checkboxes.prop('checked', false);
checkboxes.each(
function() {
uncheckTerminal($(this).closest("tr").find("td.idColumn").text());
}
);
}
});
$(document).on('change', ':checkbox', function(e) {
var id = $(this).closest("tr").find("td.idColumn").text();
if($(this).is(':checked')) {
checkTerminal(id);
} else {
uncheckTerminal(id);
}
});
function checkTerminal(id){
if((idArray.indexOf(id) == -1) && (id!="") && (id!=null)){
idArray.push(id);
console.log("Adding ID : " + id);
}
}
function uncheckTerminal(id){
var index = idArray.indexOf(id);
if((index != -1) && (id!="") && (id!=null)){
idArray.splice(index,1);
console.log("Deleting ID : " + id);
}
}
table{
border : 1px solid grey;
}
thead{
background-color : silver;
}
td{
text-align : center;
}
*{
font-family: Roboto, sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" width="20%">
<thead>
<tr>
<th>ID</th>
<th><input type="checkbox" id="checkAll" value="false"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="idColumn">001</td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td class="idColumn">002</td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td class="idColumn">003</td>
<td><input type="checkbox" disabled/></td>
</tr>
<tr>
<td class="idColumn">004</td>
<td><input type="checkbox"/></td>
</tr>
</tbody>
</table>
推荐阅读
- reactjs - 反应输入收音机不会更新检查
- unity3d - 为什么我的 Unity 脚本编译后没有生效?
- php - 在 PHP 中计算从现在到特定时间的微秒
- label - 如何仅显示图标的描述(不是标签)
- javascript - 如何在 Next.js(webpack 5)中使用 ImageMinimizerWebpackPlugin 压缩图像?
- php - 在 PHP PDO 中,如何在不知道名称的情况下绑定准备好的语句的命名参数?
- python - Web3 Python 代币出售 pancakeswap
- delphi - 在 Delphi 10.3 中使用 OLE 使用 MSWord
- html - CSS:调整窗口大小时弹出图像中的图像
- c++ - 当预期结果取决于内部随机值时如何测试(gmock)?