javascript - 如何计算 list.js 中当前未显示的选中复选框?
问题描述
我在 list.js 中有一个带有复选框的表。我想计算所有被选中的复选框,即使是那些由于列表的搜索功能而被隐藏的复选框。以下方法仅适用于搜索后当前显示的复选框。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Counting checked checkboxes</title>
</head>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<body>
<div id='sample_rows'>
<div id='sample_count'></div>
<input class="search" placeholder="Search" />
<table>
<tbody class="list">
<tr>
<td class='name'>checkbox1</td>
<td class="checked">
<input class="sample_checkbox" type="checkbox" name="checkbox1" id="checkbox1" onclick="update_count()">
</td>
</tr>
<tr>
<td class='name'>checkbox2</td>
<td class="checked">
<input class="sample_checkbox" type="checkbox" name="checkbox2" id="checkbox2" onclick="update_count()">
</td>
</tr>
</tbody>
</table>
</div>
<script>
var list_options = {
valueNames: ['name', 'checked'],
searchDelay: 500
};
var sample_list = new List('sample_rows', list_options);
sample_list.on('updated', update_count);
document.addEventListener("load", update_count());
function update_count(){
let total = sample_list.size();
let checked_count = 0;
let items = sample_list.items;
for (let i = 0; i < total; i++){
let item = items[i];
let checkbox_id = items[i]._values['name'];
let sample_checkbox = document.getElementById(checkbox_id);
if(sample_checkbox != null){
if (sample_checkbox.checked){
checked_count += 1;
}
}
else {
alert('Cannot find state of ' + checkbox_id);
}
}
document.getElementById('sample_count').innerHTML = String(checked_count) + " selected";
}
</script>
</body>
</html>
搜索时会保留复选框的状态,因此计数应该可用。这通过以下方式说明:
- 选中两个复选框。计数为 2。
- 搜索“box2”。计数显示为 1,并提示无法计数的框。
- 清除搜索框。计数再次为 2,因为保留了未显示复选框的状态。
应用搜索后,如何计算所有选中的复选框?
解决方案
无论您的复选框是否隐藏,此代码都会使您的checked
计数保持不变
<!DOCTYPE html>
<html lang="en">
<head>
<title>Counting checked checkboxes</title>
</head>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<body>
<div id='sample_rows'>
<div id='sample_count'></div>
<input class="search" placeholder="Search" />
<table>
<tbody class="list">
<tr>
<td class='name'>checkbox1</td>
<td class="checked">
<input class="sample_checkbox" type="checkbox" name="checkbox1" id="checkbox1" onclick="update_count('checkbox1')">
</td>
</tr>
<tr>
<td class='name'>checkbox2</td>
<td class="checked">
<input class="sample_checkbox" type="checkbox" name="checkbox2" id="checkbox2" onclick="update_count('checkbox2')">
</td>
</tr>
</tbody>
</table>
</div>
<script>
var checked_count = 0;
var list_options = {
valueNames: ['name', 'checked'],
searchDelay: 500
};
var sample_list = new List('sample_rows', list_options);
sample_list.on('updated', update_count);
document.addEventListener("load", update_count_on_load());
function update_count_on_load() {
let total = sample_list.size();
let checked_count = 0;
let items = sample_list.items;
for (let i = 0; i < total; i++) {
let item = items[i];
let checkbox_id = items[i]._values['name'];
let sample_checkbox = document.getElementById(checkbox_id);
if (sample_checkbox != null) {
if (sample_checkbox.checked) {
checked_count += 1;
}
} else {
alert('Cannot find state of ' + checkbox_id);
}
}
document.getElementById('sample_count').innerHTML = String(checked_count) + " selected";
}
function update_count(checkbox_id) {
let sample_checkbox = document.getElementById(checkbox_id);
if (sample_checkbox) {
if (sample_checkbox.checked) {
checked_count += 1;
} else {
checked_count -= 1;
}
}
document.getElementById('sample_count').innerHTML = checked_count + " selected";
}
</script>
</body>
</html>
推荐阅读
- java - Spring Data Jpa findBy...和findBy...Equals之间的区别
- css - 两列网格应该换成一列网格
- c# - Xamarin 表单方法不会处理
- javascript - 将选中复选框的表行提取到对象数组中
- html - 如何阻止页面在画布外菜单中滚动?
- powershell - powershell脚本连接多台计算机并执行一些wsus相关命令
- html - 具有混合文本结构的垂直未对齐 CSS 列
- c# - Azure Functions Blob 触发器不处理所有 Blob
- groovy - 使用 groovy 将 tinestamp 附加到文件名
- android - 反混淆设置 Android