如何用JS和CSS实现三态切换器控制单组复选框的三种状态？

需求说明 #

点击三态切换器的三个选项，控制同一组复选框呈现以下三种状态：

• Disabled：所有复选框未勾选
• Default：所有复选框勾选且禁用
• Enabled：所有复选框勾选

修复后的JavaScript代码 #

原JS代码存在NodeList无法直接调用setAttribute、未处理初始状态等问题，以下是修复后的完整代码：

function setupToggle() {
    // 获取目标复选框集合
    const checkboxes = document.querySelectorAll('input[type="checkbox"].form-check-input');
    // 获取所有切换器单选框
    const toggleRadios = document.querySelectorAll('input[name="toggle"]');

    // 统一处理复选框状态的函数
    function updateCheckboxState(toggleValue) {
        checkboxes.forEach(checkbox => {
            switch(toggleValue) {
                case 'false':
                    // Disabled状态：未勾选、可交互
                    checkbox.checked = false;
                    checkbox.disabled = false;
                    break;
                case 'true':
                    // Enabled状态：勾选、可交互
                    checkbox.checked = true;
                    checkbox.disabled = false;
                    break;
                case '-1':
                    // Default状态：勾选、禁用
                    checkbox.checked = true;
                    checkbox.disabled = true;
                    break;
            }
        });
    }

    // 给每个切换器绑定切换事件
    toggleRadios.forEach(radio => {
        radio.addEventListener('change', () => {
            if (radio.checked) {
                updateCheckboxState(radio.value);
            }
        });
    });

    // 页面初始化时，应用当前选中的切换器状态
    const activeToggle = document.querySelector('input[name="toggle"]:checked');
    if (activeToggle) {
        updateCheckboxState(activeToggle.value);
    }
}

// DOM加载完成后初始化功能
document.addEventListener('DOMContentLoaded', setupToggle);

CSS样式（美化三态切换器） #

原生单选框样式不够直观，通过CSS将其美化成三态切换按钮：

/* 隐藏原生单选框 */
.tw-toggle input[type="radio"] {
    display: none;
}

/* 切换器容器样式 */
.tw-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    background-color: #e9ecef;
    padding: 4px;
    border-radius: 24px;
    width: fit-content;
    cursor: pointer;
}

/* 单个切换选项样式 */
.tw-toggle .toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
    color: #6c757d;
    font-size: 18px;
}

/* 选中状态的切换选项高亮 */
.tw-toggle input[type="radio"]:checked + .toggle {
    background-color: #0d6efd;
    color: #fff;
}

/* 禁用复选框的样式优化 */
.form-check-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

关键说明 #

1. 遍历处理元素：querySelectorAll返回的是NodeList，必须通过forEach逐个操作复选框
2. 属性直接赋值：直接操作元素的checked、disabled布尔属性，比setAttribute更可靠
3. 初始状态同步：页面加载时主动触发状态设置，确保默认选中的切换器对应正确的复选框状态
4. 性能优化：一次性获取DOM元素，避免重复查询，提升交互响应速度

内容的提问来源于stack exchange，提问作者shada