I have a table with checkboxes in list.js. I want to count all checkboxes that are checked, even those hidden due to the search function of the list. The method below works for only the checkboxes that are currently displayed after searching.
<!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>The state of checkboxes is preserved while searching, so the count should be available. This is illustrated by:
- Check both checkboxes. Count is 2.
- Search for "box2". Count is displayed as 1, with alert for the box that fails to get counted.
- Clear search box. Count is 2 again because state of undisplayed checkbox is preserved.
How can I count all of the checked checkboxes when a search has been applied?
from How do I count checked checkboxes in list.js that are not currently displayed?
No comments:
Post a Comment