Dropdown Conditional Logic to Reveal Checkbox Groups

Hello everyone,

I am trying to replicate a functionality of a website where there is a dropdown section of a form with three options. I would like when any of the options is selected for specific checkbox areas to be made visible while the other checkbox areas are hidden. There are 5 checkbox areas and the first three are tied to the first dropdown option and then the fourth checkbox area is tied to the 2nd dropdown option and fifth checkbox area tied to the third dropdown option.

I have written this javascript and tried troubleshooting it in various ways but whatever I do the script is not working. The classes are correct as I can interact with them using the custom css feature.

Any insights would be greatly appreciated. 🙂


 

<script>
document.addEventListener("DOMContentLoaded", function() {
    const dropdown = document.querySelector("#select-f86cc2b7-6354-458d-89ba-d69d7b227aaa-field");
    const checkboxGroup1 = document.querySelector("#checkbox-3f1e64e2-c0c5-4443-8013-a94eb1c6b217");
    const checkboxGroup2 = document.querySelector("#checkbox-5b55b762-941b-4236-a407-8bf3592af579");
    const checkboxGroup3 = document.querySelector("#checkbox-bdc7e921-2335-4c85-b44c-ee2c3d82ea5f");
    const checkboxGroup4 = document.querySelector("#checkbox-d2931fc5-b200-461d-b656-76ca4dd0fbf1");
    const checkboxGroup5 = document.querySelector("#checkbox-9e25b2d0-c2a7-470f-bcdd-11f549a3befc");

    // Function to hide all checkbox groups
    function hideAllGroups() {
        checkboxGroup1.style.display = 'none';
        checkboxGroup2.style.display = 'none';
        checkboxGroup3.style.display = 'none';
        checkboxGroup4.style.display = 'none';
        checkboxGroup5.style.display = 'none';
    }

    // Function to show default groups (1, 2, 3)
    function showDefaultGroups() {
        checkboxGroup1.style.display = 'block';
        checkboxGroup2.style.display = 'block';
        checkboxGroup3.style.display = 'block';
    }

    // Event listener for dropdown changes
    dropdown.addEventListener("change", function() {
        hideAllGroups();
        switch (dropdown.value) {
            case "Option1":
                showDefaultGroups();
                break;
            case "Option2":
                checkboxGroup4.style.display = 'block';
                break;
            case "Option3":
                checkboxGroup5.style.display = 'block';
                break;
            default:
                showDefaultGroups();  // Show default groups if an unrecognized option is somehow selected
                break;
        }
    });

    // On page load, initially hide all then show the default groups
    hideAllGroups();
    showDefaultGroups();
});
</script>