asked on June 10 Show version history

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 

1 0