取消Android复选框时如何清空设备总数输入框？

需求说明 #

• 点击Android复选框时，弹出对应设备数量输入框
• 输入设备数量后，设备总数输入框自动计算并填充总和
• 取消勾选Android复选框时，清空设备总数输入框

现有脚本问题 #

当前脚本仅实现了设备数量变化时自动计算总数的逻辑，但未处理Android复选框取消勾选时清空总数的需求。

修改后的实现代码 #

document.addEventListener("DOMContentLoaded", function() {
    const deviceInputs = document.querySelectorAll('#chromebook-device, #windows-device, #macos-device, #android-device, #ios-device');
    const totalInput = document.getElementById('total-device');
    const androidCheckbox = document.getElementById('android-checkbox'); // 替换为页面中实际的Android复选框ID

    // 复用的总数计算函数
    function calculateTotal() {
        let totalDevices = 0;
        deviceInputs.forEach(input => {
            const number = parseInt(input.value, 10) || 0;
            totalDevices += number;
        });
        totalInput.value = totalDevices;
    }

    // 监听设备数量输入框的变化，实时计算总数
    deviceInputs.forEach(input => {
        input.addEventListener('input', calculateTotal);
    });

    // 监听Android复选框的状态切换
    androidCheckbox.addEventListener('change', function() {
        if (!this.checked) {
            // 取消勾选时清空总数输入框
            totalInput.value = '';
            // 可选：同时清空Android设备数量输入框（匹配输入框隐藏的逻辑）
            document.getElementById('android-device').value = '';
        } else {
            // 重新勾选时重新计算总数
            calculateTotal();
        }
    });
});

关键逻辑说明 #

1. 提取计算函数：把总数计算逻辑封装成calculateTotal函数，方便在多个事件中复用
2. 复选框状态监听：给Android复选框绑定change事件，判断是否取消勾选
3. 清空操作：取消勾选时直接清空总数输入框，可选同步清空Android设备数量输入框，避免隐藏输入框后残留数值
4. 重新计算：再次勾选时重新计算总数，确保数值准确

注意事项 #

• 请确保androidCheckbox对应的ID与页面中实际的Android复选框ID一致，若不一致请修改选择器
• 如果不需要清空Android设备数量输入框，可删除对应的document.getElementById('android-device').value = '';代码行

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