如何用JavaScript实现搜索框内容匹配页面数据并选中对应复选框

直接替换原有JavaScript代码为以下内容即可实现需求：

let SearchingNumbers_btn = document.getElementById('SearchingNumbers_btn');
let allNumbers = document.getElementById('allNumbers');
// 获取所有手机号对应的复选框
const checkboxes = document.querySelectorAll('.checkbox_inputs');

SearchingNumbers_btn.addEventListener('click', function(){
    const insideTextarea = allNumbers.value.trim();
    // 按换行拆分输入内容，同时去除每个手机号前后空格、过滤空行产生的无效值
    const mobileList = insideTextarea.split("\n").map(item => item.trim()).filter(item => item);
    
    // 先重置所有复选框为未选中状态，避免旧状态干扰
    checkboxes.forEach(checkbox => checkbox.checked = false);

    // 遍历所有复选框，匹配到输入列表中的手机号则设为选中
    checkboxes.forEach(checkbox => {
        const currentMobile = checkbox.dataset.uMobile;
        if (mobileList.includes(currentMobile)) {
            checkbox.checked = true;
        }
    });
});

可选优化 #

如果需要同时支持顿号、逗号分隔的输入格式，只需要将拆分输入的代码修改为：

const mobileList = insideTextarea.split(/[、,\n]/g).map(item => item.trim()).filter(item => item);

即可兼容换行、中文顿号、英文逗号三种常见的多值分隔方式。

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