document.addEventListener('DOMContentLoaded', function () {
    // Get all checkboxes with the class 'toggleMainCheckbox'
    const checkboxes = document.querySelectorAll('.toggleMainCheckbox');

    // Function to update the 'toggleMainBall' class based on the checkbox state
    function updateBall(checkbox) {
        const ball = checkbox.previousElementSibling;
        if (checkbox.checked) {
            ball.classList.add('toggleMainBallChecked');
        } else {
            ball.classList.remove('toggleMainBallChecked');
        }
    }

    checkboxes.forEach(function (checkbox) {
        // Update the ball's state on page load
        updateBall(checkbox);

        // Attach a change event listener to each checkbox
        checkbox.addEventListener('change', function () {
            updateBall(this);
        });
    });
});