使用复选框选择多个站点进行搜索答案

【问题标题】：Using checkboxes to select multiple sites to search使用复选框选择多个站点进行搜索
【发布时间】：2021-04-19 14:28:13
【问题描述】：

我正在改进我为工作而构建的搜索工具。我有一个添加复选框的请求，因此我希望它只打开带有选定复选框的站点，而不是在所有可用站点中打开搜索词。目前我仍然只是在提交所有内容。而且我找不到与此问题相关的任何内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="icon" type="image/png" href="img/favicon.png" sizes="32x32" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="css/osint.css"/>

        <title>Multi-search Tool</title>
    </head>

    <body topmargin=0 leftmargin=0 rightmargin=0 marginwidth="0" marginheight="0" bgcolor=white>
        <div class="header">
            <div class="header-top">
                <!-- A.1 SITENAME -->
                <a class="sitelogo" href="index.html" title="Home"></a>
                <div class="sitename">
                    <h1><a href="index.html"><img src="img/banner.png" alt="" width="800" height="125" /></a></h1>
                </div>
            </div>
            <!--VPN warning banner-->
            <div class="vpnWarning">
                <h3>Please ensure you have connected to VPN before using this tool</h3>
            </div>
        </div>

        <table>
            <thead>
                <tr>
                    <th colspan="3">Multi-Search Tool</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Search Engines</td>
                    <td>Social Media</td>
                    <td>Other</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="color" value="Google"> Google</td>
                    <td><input type="checkbox" name="color" value="Facebook"> Facebook</td>
                    <td><input type="checkbox" name="color" value="Other"> Reddit</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="color" value="Bing"> Bing</td>
                    <td><input type="checkbox" name="color" value="Twitter"> Twitter</td>
                    <td><input type="checkbox" name="color" value="Reddit"> Other</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="color" value="DuckDuckGo"> DuckDuckGo</td>
                    <td><input type="checkbox" name="color" value="LinkedIn"> LinkedIn</td>
                    <td><input type="checkbox" name="color" value="Other"> Other</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="color" value="Yahoo"> Yahoo</td>
                    <td><input type="checkbox" name="color" value="Instagram"> Instagram</td>
                    <td><input type="checkbox" name="color" value="Other"> Other</td>
                </tr>
            </tbody>
        </table>

        <script type="text/javascript">
            function doall(all) {
                window.open('http://google.com/search?q=' + 'intext:"' + all + '"', 'googlewindow');
                window.open('http://bing.com/search?q=' + all, 'bingwindow');
                window.open('http://search.yahoo.com/search?p=' + all, 'yahoowindow');
                window.open('https://duckduckgo.com/?q=' + all, 'ddgwindow');
                window.open('https://twitter.com/search?q=' + all, 'twitterwindow');
                window.open('https://www.facebook.com/search/top/?q=' + all + '&epa=SEARCH_BOX', 'facebookwindow');
                window.open('http://google.com/search?q=' + 'site:linkedin.com" '+ all +'"' , 'linkedinwindow');
                window.open('https://reddit.com/search/?q=' + all, 'redditwindow');
                window.open('https://www.google.com/search?ei=eau4WurGOMz1kwW825fYDw&q=%22' + all + '%22+site%3Ainstagram.com&oq=%22' + all + '%22+site%3Ainstagram.com&gs_l=psy-ab.3...13286.13286.0.13901.1.1.0.0.0.0.181.181.0j1.1.0....0...1c.1.64.psy-ab..0.0.0....0.JovkcTLEugo','instagramwindow');}
        </script>

        <form onsubmit="doall(this.all.value); return false;">
            <input name="all" id="ipall" size="40" value="" /><br>
            <input type="submit" style="width:120px" value="Submit" />
            (Allow Pop-ups)<br /><br />
        </form>
        <button id="btn">Check / uncheck All</button><!--<button id="btn1">Use Last</button>-->
        <button onclick="document.getElementById('ipall').value = ''">Clear input field</button>

        <script src="js/DFT.js"></script>
    </body>
</html>

【问题讨论】：

标签： javascript html checkbox

【解决方案1】：

您需要将复选框包装在form 标签中，以便我们可以获取选中的值。然后为所有 URL 创建一个 object 变量，以便我们可以从中调用检查的值并将其放在 window.open() 函数中。

下面是一个例子：

const getURL = (search) => ({
  Google: `http://google.com/search?q=intext:${search}`,
  Yahoo: `http://search.yahoo.com/search?p=${search}`,
  DuckDuckGo: `https://duckduckgo.com/?q=${search}`,
  Twitter: `https://twitter.com/search?q=${search}`,
  Facebook: `https://www.facebook.com/search/top/?q=${search}&epa=SEARCH_BOX`,
  LinkedIn: `http://google.com/search?q=site:linkedin.com${search}`,
  Reddit: `https://reddit.com/search/?q=${search}`,
  Instagram: `https://www.google.com/search?ei=eau4WurGOMz1kwW825fYDw&q=%22${search}%22+site%3Ainstagram.com&oq=%2${search}%22+site%3Ainstagram.com&gs_l=psy-ab.3...13286.13286.0.13901.1.1.0.0.0.0.181.181.0j1.1.0....0...1c.1.64.psy-ab..0.0.0....0.JovkcTLEugo` 
})

function doall(e) {
 const sites_checked = [...new FormData(document.forms.namedItem('my-form'))].filter(e => e[0] === 'search_engine').map(e => e[1])
 const search = document.getElementById('ipall').value
 sites_checked.forEach(site => {
   const URL = getURL(search)[site]
   
   // If site exist on object, open new tab
   if (URL) window.open(URL)
 })
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="icon" type="image/png" href="img/favicon.png" sizes="32x32" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/osint.css"/>

<title>Multi-search Tool</title>
</head>

<body topmargin=0 leftmargin=0 rightmargin=0 marginwidth="0" marginheight="0" bgcolor=white>
<div class="header">
    <div class="header-top">

        <!-- A.1 SITENAME -->
        <a class="sitelogo" href="index.html" title="Home"></a>
        <div class="sitename">
        <h1><a href="index.html"><img src="img/banner.png" alt="" width="800" height="125" /></a></h1>
      </div>
    </div>
    <!--VPN warning banner-->
    <div class="vpnWarning">
        <h3>Please ensure you have connected to VPN before using this tool</h3>
    </div>
</div>
<form name="my-form" onsubmit="doall(event); return false;">
<table>
<thead>
    <tr>
        <th colspan="3">Multi-Search Tool</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Search Engines</td>
        <td>Social Media</td>
        <td>Other</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="search_engine" value="Google"> Google</td>
        <td><input type="checkbox" name="search_engine" value="Facebook"> Facebook</td>
        <td><input type="checkbox" name="search_engine" value="Other"> Reddit</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="search_engine" value="Bing"> Bing</td>
        <td><input type="checkbox" name="search_engine" value="Twitter"> Twitter</td>
        <td><input type="checkbox" name="search_engine" value="Reddit"> Other</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="search_engine" value="DuckDuckGo"> DuckDuckGo</td>
        <td><input type="checkbox" name="search_engine" value="LinkedIn"> LinkedIn</td>
        <td><input type="checkbox" name="search_engine" value="Other"> Other</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="search_engine" value="Yahoo"> Yahoo</td>
        <td><input type="checkbox" name="search_engine" value="Instagram"> Instagram</td>
        <td><input type="checkbox" name="search_engine" value="Other"> Other</td>
    </tr></tbody></table>

    <input name="all" id="ipall" size="40" value="" /><br>
    <input type="submit" style="width:120px" value="Submit"/>
    (Allow Pop-ups)<br /><br />
  </form>
  <button id="btn">Check / uncheck All</button><!--<button id="btn1">Use Last</button>--><button 
onclick="document.getElementById('ipall').value = ''">Clear input field</button>

</body>

编辑在这段代码 sn-p 中，弹出窗口不起作用，因为沙盒没有弹出权限。你必须在最后进行测试。

【讨论】：