多搜索工具优化：如何基于HTML复选框实现指定站点定向跳转？

问题根因 #

• 原doall函数硬编码了全量站点的跳转逻辑，完全未读取复选框的选中状态，无论用户勾选哪些站点，提交后都会默认打开全部站点的搜索窗口。
• 原页面的复选框存在值错配问题：比如Reddit对应的input value错误设置为Other，多个无实际功能的Other占位复选框重复出现，选中后无对应搜索逻辑。

核心调整步骤 #

• 给所有有效站点的复选框统一增加search-site类标识，修正每个复选框的value值，确保value与对应站点名称一一匹配，移除所有无实际功能的占位复选框。
• 建立站点与对应搜索链接模板的映射关系，替代原函数中硬编码的跳转逻辑。
• 重写doall函数逻辑：提交时先获取所有已勾选的站点列表，仅对选中的站点匹配对应搜索链接执行窗口打开操作。
• 补全全选按钮的点击逻辑，实现一键全选/取消全选的功能。

关键修改代码 #

<!-- 修正后的复选框示例，确保value与站点一一对应 -->
<input type="checkbox" class="search-site" value="Google"> Google
<input type="checkbox" class="search-site" value="Bing"> Bing
<input type="checkbox" class="search-site" value="DuckDuckGo"> DuckDuckGo
<input type="checkbox" class="search-site" value="Yahoo"> Yahoo
<input type="checkbox" class="search-site" value="Twitter"> Twitter
<input type="checkbox" class="search-site" value="Facebook"> Facebook
<input type="checkbox" class="search-site" value="LinkedIn"> LinkedIn
<input type="checkbox" class="search-site" value="Instagram"> Instagram
<input type="checkbox" class="search-site" value="Reddit"> Reddit

// 站点搜索链接模板映射，严格沿用原代码的搜索规则
const siteSearchMap = {
  Google: (keyword) => `http://google.com/search?q=intext:"${keyword}"`,
  Bing: (keyword) => `http://bing.com/search?q=${keyword}`,
  Yahoo: (keyword) => `http://search.yahoo.com/search?p=${keyword}`,
  DuckDuckGo: (keyword) => `https://duckduckgo.com/?q=${keyword}`,
  Twitter: (keyword) => `https://twitter.com/search?q=${keyword}`,
  Facebook: (keyword) => `https://www.facebook.com/search/top/?q=${keyword}&epa=SEARCH_BOX`,
  LinkedIn: (keyword) => `http://google.com/search?q=site:linkedin.com "${keyword}"`,
  Instagram: (keyword) => `https://www.google.com/search?q="${keyword}"+site:instagram.com`,
  Reddit: (keyword) => `https://reddit.com/search/?q=${keyword}`
};

function doall(keyword) {
  // 获取所有已勾选的站点列表
  const selectedSites = Array.from(document.querySelectorAll('.search-site:checked')).map(item => item.value);
  // 仅对选中的站点执行跳转
  selectedSites.forEach(siteName => {
    if (siteSearchMap[siteName]) {
      window.open(siteSearchMap[siteName](keyword), `${siteName}window`);
    }
  });
}

// 绑定全选按钮的点击事件
document.getElementById('btn').addEventListener('click', function() {
  const allCheckBoxes = document.querySelectorAll('.search-site');
  const allChecked = Array.from(allCheckBoxes).every(cb => cb.checked);
  allCheckBoxes.forEach(cb => cb.checked = !allChecked);
});

注意：使用该功能时需要提前给浏览器开放当前页面的弹窗权限，否则选中站点后会因弹窗拦截无法正常打开搜索窗口。

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