如何计算 list.js 中当前未显示的选中复选框？
Posted
技术标签:
【中文标题】如何计算 list.js 中当前未显示的选中复选框？【英文标题】：How do I count checked checkboxes in list.js that are not currently displayed? 【发布时间】：2021-07-14 21:52:03 【问题描述】：我在 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，因为保留了未显示复选框的状态。
应用搜索后如何计算所有选中的复选框？
【问题讨论】：
尝试注释掉这一行sample_list.on('updated', update_count);，似乎每次搜索结果时update_count 都会被调用，这会导致清除之前存储的计数。
@hrishikesh 我需要计算所有的复选框，而不仅仅是简单的例子。当有人搜索并切换复选框时会发生什么？我需要数数。
【参考方案1】：
无论您的复选框是否隐藏，此代码都会保持您的 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>【讨论】：
【参考方案2】：我刚刚给你写了一个新的计算逻辑： 根据点击进行计数，如果我由于某种原因没有弄错，则无需使用列表，并将结果保存在变量中。 ...
let res = 0
document.querySelectorAll("input[type=checkbox]").forEach(input =>
input.addEventListener("click", (e) =>
e.target.checked ? res = res + 1 : res = res - 1
document.getElementById('sample_count').innerHTML = res + " selected";
)
)
...
删除
document.getElementById('sample_count').innerHTML
来自您的功能。公平地说，不确定那里发生了什么，对于简单的计算来说看起来有点多。
let res = 0
document.querySelectorAll("input[type=checkbox]").forEach(input =>
input.addEventListener("click", (e) =>
e.target.checked ? res = res + 1 : res = res - 1
document.getElementById('sample_count').innerHTML = res + " selected";
)
)<!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>【讨论】：
以上是关于如何计算 list.js 中当前未显示的选中复选框？的主要内容，如果未能解决你的问题，请参考以下文章