Question

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

<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

Answer 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>

复选框表单中的自定义URL

1 个答案: