Select all functionality

This commit is contained in:
RubenPX 2022-04-08 12:40:50 +02:00
parent 832006f223
commit 26275552c5
2 changed files with 29 additions and 0 deletions

View File

@ -217,4 +217,32 @@
}, 200); }, 200);
} }
/**
* Select all functionality
*/
var btnSelectAll = document.getElementById("SelectAllBTN");
var tableListCheckboxes = document.querySelectorAll(".deviceSelect");
function itemListCheckChanged(event) {
let isAllChecked = Array.from(tableListCheckboxes).map(itm => itm.checked);
if (isAllChecked.every(bool => bool == true)) {
btnSelectAll.checked = true;
btnSelectAll.indeterminate = false;
} else if (isAllChecked.every(bool => bool == false)) {
btnSelectAll.checked = false;
btnSelectAll.indeterminate = false;
} else {
btnSelectAll.indeterminate = true;
}
}
tableListCheckboxes.forEach(item => {
item.addEventListener("click", itemListCheckChanged);
})
btnSelectAll.addEventListener("click", event => {
let checkedState = event.target.checked;
tableListCheckboxes.forEach(ckeckbox => ckeckbox.checked = checkedState);
})
})(); })();

View File

@ -71,6 +71,7 @@
{% endif %} {% endif %}
<div class="tab-content pt-5"> <div class="tab-content pt-5">
<div id="devices-list" class="tab-pane fade devices-list active show"> <div id="devices-list" class="tab-pane fade devices-list active show">
<label class="btn btn-primary " for="SelectAllBTN"><input type="checkbox" id="SelectAllBTN" autocomplete="off"></label>
<div class="btn-group dropdown ml-1"> <div class="btn-group dropdown ml-1">
<button id="btnLots" type="button" onclick="processSelectedDevices()" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <button id="btnLots" type="button" onclick="processSelectedDevices()" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-folder2"></i> <i class="bi bi-folder2"></i>