复选框表单中的自定义 URL答案

【问题标题】：Custom URL from a checkbox form复选框表单中的自定义 URL
【发布时间】：2016-11-02 06:28:13
【问题描述】：

我正在尝试从一些复选框创建自定义 URL。

<form method="get" action="/search">
    <input type="checkbox" name="q" value="label:TAG1" />TAG1<br />
    <input type="checkbox" name="q" value="label:TAG2" />TAG2<br />
    <input type="checkbox" name="q" value="label:TAG3" />TAG3<br />
    <input type="submit" value="Filtrar" />
</form>

我有这个：http://www.exemple.com/search?q=label:TAG1&q=label:TAG2&q=label:TAG3

但我想要这个：http://www.exemple.com/search/?q=label:TAG1|label:TAG2|label:TAG3

【问题讨论】：

标签： jquery html

【解决方案1】：

试试这个：
（解释在代码中）

$(document).ready(function(){
    $("form").on("submit",function(e){
        // Disable the button's submit.
        e.preventDefault();

        // Start setting a custon query.
        var query="?q=";

        // Check each checked checkboxes.
        $("input[type='checkbox']:checked").each(function(index){
            // Adds | only on second and next...
            if(index>0){
                query+="|";
            }
            // Adds the value.
            query+=$(this).val();
        });
        //Redirect with the query in GET
        console.log( $(this).attr("action")+query );
        window.location=$(this).attr("action")+query;
    });
});

CodePen

编辑

将此添加到您的<head>：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

【讨论】：

我真的很感激！但它不适用于我的博客。我仍然得到这个：simulatorio.blogspot.com.br/…（它正在使用 codepen，但我不知道为什么它在我的博客上不起作用）
您在控制台中有Uncaught ReferenceError: $ is not defined(…)... 表示未加载 jQuery。
哦不！我为此道歉。我仍在学习如何到达那里。我将 ajax 库添加到我的博客中。我错过了什么？
点击 [F12] 查看控制台...现在您已经修复了 jQuery 错误。伟大的。你还有https://mirocine.googlecode.com/files/paginacionbloggermtb.js Failed to load resource: the server responded with a status of 404 ()这个文件没有找到。也许是路径错误？
我已经修复了这个错误。但我仍然不知道为什么 jquery 不起作用。 :(