Enhancing Checkbox Field Dropdown Select with JetFormBuilder

gistfile1.txt

See tutorial here: https://www.youtube.com/watch?v=TJ-2EN4tws8
_______________________________________________________________
<style>


.container {
    position: relative;
    max-width: 320px;
    width: 100%;
    margin: 80px auto 30px;
}

.jet-form-builder-row.field-type-checkbox-field {
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-radius: 30px;
    cursor: pointer;
    background-color: #166dfe;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.20);
    flex-direction: row;
    position: relative;
}

/* Style for the unique ID */
#selectLabelUniqueText {
    color: #ffffff !important; /* White color for the selected label text */
}

.checkradio-wrap {
    position: absolute;
    top: calc(100% + 10px) !important;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 8px;
    padding: 10px 16px;
    background-color: #fff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
    z-index: 1000;
}

.checkradio-wrap:hover {
    background-color: #f0f0f0 !important;
}

.layout-column .jet-form-builder__fields-group.checkradio-wrap {
    background-color: #ffffff !important; 
}

.jet-form-builder-row.field-type-checkbox-field.open + .checkradio-wrap {
    top: 50px;
}

.jet-form-builder__label.open + .checkradio-wrap {
    display: block;
}

/* Custom Scrollbar */
.checkradio-wrap::-webkit-scrollbar {
    width: 8px;
}

.checkradio-wrap::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.2);
    border-radius: 8px;
}

.checkradio-wrap::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,0,0,.3);
}
</style>


<script>
document.addEventListener('DOMContentLoaded', function() {
    const selectLabel = document.querySelector('.jet-form-builder__label');
    // Ensure the label text element has a unique ID for styling
    selectLabel.id = 'selectLabelUniqueText'; // Assigning unique ID directly here

    const dropdown = document.querySelector('.checkradio-wrap');

    selectLabel.addEventListener('click', function() {
        dropdown.classList.toggle('open');
        selectLabel.classList.toggle('open');
    });

    function updateSelectionCount() {
        const checkedBoxes = document.querySelectorAll('input[name="checkboxes_field[]"]:checked');
        const labelText = document.querySelector('#selectLabelUniqueText'); // Use the unique ID for selecting
        labelText.innerText = checkedBoxes.length > 0 ? `${checkedBoxes.length} Selected` : 'Select';
    }

    document.querySelectorAll('input[name="checkboxes_field[]"]').forEach(function(checkbox) {
        checkbox.addEventListener('change', updateSelectionCount);
    });

    // Close the dropdown when clicking outside
    document.addEventListener('click', function(event) {
        if (!selectLabel.contains(event.target) && !dropdown.contains(event.target)) {
            dropdown.classList.remove('open');
            selectLabel.classList.remove('open');
        }
    }, true);
});

</script>