I was working on creating a new Fire Department form and the user was wanting to quickly view which users were in compliance based on a lookup value. There was heavy filtering on the table based on the users station, battalion or shift and I needed a way for the table to refresh the results and the checkbox lookups if the filter changed. I looked through here and was unable to find something that was specific to what I was needing, so leveraging AI to write the JS, I have this solution to share. I hope this helps someone looking for an easy-to-implement method of checking a single checkbox based upon a static lookup value, while also using filtering drop downs to refine the data:
For a simple demo:
Create a table with the CSS class of PersonnelTable
Inside that table, have a single checkbox with whatever title/value you want as well as a single line text field that will utilize a data source to fill it with "True". You can adjust the JS to alter the return value if needed.
I did not use CSS identifiers for the field, just update Field1 (checkbox) and Field2 (single line text box) with whatever they are in your demo.
Javascript portion:
document.addEventListener('DOMContentLoaded', function() {
// Function to check the checkboxes based on the value of Field2
function checkCheckboxes() {
const rows = document.querySelectorAll('.PersonnelTable tbody tr'); // Select all rows in the PersonnelTable
console.log('Number of rows:', rows.length);
rows.forEach(function(row) {
const checkbox = row.querySelector('input[type="checkbox"][id^="Field1"]'); // Find the checkbox in the current row
const inputs = row.querySelectorAll('input[id^="Field2"]'); // Find all Field2 inputs in the current row
inputs.forEach(function(input) {
const value = input.value.trim().toLowerCase();
console.log('Field2 value:', value);
if (value === 'true') { // Check if the value of Field2 is 'true'
checkbox.checked = true; // Check the corresponding checkbox
console.log('Checkbox checked:', checkbox.checked);
} else {
checkbox.checked = false; // Uncheck the corresponding checkbox if the value is not 'true'
console.log('Checkbox checked:', checkbox.checked);
}
});
});
console.log('Checkboxes updated based on Field2 values.');
}
// Function to clear all checkboxes
function clearCheckboxes() {
const checkboxes = document.querySelectorAll('.PersonnelTable input[type="checkbox"][id^="Field1"]');
checkboxes.forEach(function(checkbox) {
checkbox.checked = false;
});
console.log('Checkboxes cleared.');
}
// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
console.log('Mutation observed. Clearing checkboxes and reapplying script.');
clearCheckboxes(); // Clear all checkboxes
checkCheckboxes(); // Reapply the script to update checkboxes
};
// Select the target node (the element with class 'PersonnelTable')
const targetNode = document.querySelector('.PersonnelTable');
console.log('PersonnelTable:', targetNode);
// Options for the observer (which mutations to observe)
const config = { childList: true, subtree: true };
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
if (targetNode) {
observer.observe(targetNode, config);
} else {
console.error('Element with class "PersonnelTable" not found.');
}
// Initial check in case the table is already loaded
checkCheckboxes();
});
Results:
I hope this helps out anyone who may be searching