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