能否将两个功能一致的checkbox处理函数合并为一个函数？

完全可以将两个功能逻辑一致的函数合并为一个，只需要在函数开头对入参做统一兼容处理即可。

核心思路 #

• 先识别入参类型：如果入参携带target属性，说明是鼠标事件对象，取event.target作为要操作的checkbox元素；否则直接将入参作为checkbox元素使用
• 可顺带优化原有冗余逻辑：原代码中删除数组项的for循环+filter写法冗余，直接通过一次filter即可完成对应值的过滤，简化代码结构

合并后的完整代码 #

function crewChecked(input) {
    // 统一兼容两种入参：事件对象 / 直接传入的checkbox元素
    const checkbox = input.target ?? input;
    if (checkbox.checked) {
        names.push(checkbox.value);
    } else {
        // 简化删除逻辑：直接过滤掉匹配的value即可
        names = names.filter(name => name !== checkbox.value);
    }
    const buttonText = names.length === 0 ? "Select Crew" : `${names.length} crew`;
    document.getElementById('dropdownCrewButton').innerText = buttonText;
}

低版本浏览器兼容方案 #

如果需要适配不支持空值合并运算符??的低版本浏览器，可将入参处理逻辑替换为以下兼容写法：

// 写法1：通过tagName判断是否为DOM元素
const checkbox = input.tagName ? input : input.target;
// 写法2：判断是否存在target属性
const checkbox = typeof input.target !== 'undefined' ? input.target : input;

使用说明 #

原有两种调用场景都不需要修改：

• 绑定鼠标事件的场景直接传事件对象即可正常运行，比如checkbox.addEventListener('change', crewChecked)
• 手动调用的场景直接传入checkbox元素即可，比如crewChecked(document.querySelector('#your-checkbox'))

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