使用多个表单复选框中的选项更新Javascript URL

Question

我有一个表单与2组复选框与视图，这可能是3或4行。

对于这个问题，我有2个，每个都有5个以上的复选框，并且可以在这些复选框中选择多个项目。

当用户选中复选框时，我希望更新URL并使用我将用来过滤内容的参数进行刷新。

我想要的URL：

example.com/category/?content=video_static&channel=facebook-ads_instagram-ads

我得到的URL是：

example.com/category/?content=video&content=static&channel=facebook-ads&channel=instagram-ads

我目前没有使用javascript更改URL，而只是输入表单并提交。我想我需要使用Javascript来实现更好的URL处理。

我想要使用内核来分离复选框选择，在那一刻，我很高兴只刷新页面。

我知道这对一些人来说可能很简单，但是Javascript不是我喜欢的，我已经打开了大约20个标签。任何帮助都是非常感谢的。

以下是示例表单(请忽略tweo different复选框HTML格式，在此之前我没有更新第二个复选框)：

​

   <form id="abFilter" method="get" role="form" action="">
        <div class="list-group">
        <h3>Content Type</h3>
            <div class="list-group-item checkbox">
            <input type="checkbox" class="" id="static" name="content" value="static">
            <label for="static">static</label>
            </div>
            <div class="list-group-item checkbox">
            <input type="checkbox" class="" id="carousel" name="content" value="carousel">
            <label for="carousel">carousel</label>
            </div>
            <div class="list-group-item checkbox">
            <input type="checkbox" class="" id="video" name="content" value="video">
            <label for="video">video</label>
            </div>
            <div class="list-group-item checkbox">
            <input type="checkbox" class="" id="gif" name="content" value="gif">
            <label for="gif">gif</label>
            </div>
            <div class="list-group-item checkbox">
            <input type="checkbox" class="" id="dpa" name="content" value="dpa">
            <label for="dpa">dpa</label>
            </div>
            <div class="list-group-item checkbox">
            <input type="checkbox" class="" id="stories" name="content" value="stories">
            <label for="stories">stories</label>
            </div>
            <div class="list-group-item checkbox">
            <input type="checkbox" class="" id="influencer" name="content" value="influencer">
            <label for="influencer">influencer</label>
            </div>
        </div>
        <div class="list-group">
        <h3>Channels</h3>
            <div class="list-group-item checkbox">
            <label>
            <input type="checkbox" class="" name="channel" value="facebook-ads">
            facebook-ads
            </label>
            </div>
            <div class="list-group-item checkbox">
            <label>
            <input type="checkbox" class="" name="channel" value="instagram-ads">
            instagram-ads
            </label>
            </div>
            <div class="list-group-item checkbox">
            <label>
            <input type="checkbox" class="" name="channel" value="google-ads">
            google-ads
            </label>
            </div>
            <div class="list-group-item checkbox">
            <label>
            <input type="checkbox" class="" name="channel" value="microsoft-ads">
            microsoft-ads
            </label>
            </div>
            <div class="list-group-item checkbox">
            <label>
            <input type="checkbox" class="" name="channel" value="tiktok-ads">
            tiktok-ads
            </label>
            </div>
            <div class="list-group-item checkbox">
            <label>
            <input type="checkbox" class="" name="channel" value="snapchat-ads">
            snapchat-ads
            </label>
            </div>
            <div class="list-group-item checkbox">
            <label>
            <input type="checkbox" class="" name="channel" value="youtube-ads">
            youtube-ads
            </label>
            </div>
            <div class="list-group-item checkbox">
            <label>
            <input type="checkbox" class="" name="channel" value="pinterest-ads">
            pinterest-ads
            </label>
            </div>
            <div class="list-group-item checkbox">
            <label>
            <input type="checkbox" class="" name="channel" value="podcast-ads">
            podcast-ads
            </label>
            </div>
        </div> 
    <button id="select">Apply Filter</button>
    </form>

​

Answer 1

以下命令应该可以完成此操作：

document.querySelector("form").onsubmit=ev=>{
  ev.preventDefault();
  let o={};
  ev.target.querySelectorAll("[name]:checked").forEach(el=>{
   (o[el.name]=o[el.name]||[]).push(el.value)})
  console.log(location.pathname+"?"+
   Object.entries(o).map(([v,f])=>
   v+"="+f.join("_")).join("&")
  );
}

<form id="abFilter" method="get" role="form" action="">
<div class="list-group">
<h3>Content Type</h3>
    <div class="list-group-item checkbox">
    <input type="checkbox" class="" id="static" name="content" value="static">
    <label for="static">static</label>
    </div>
    <div class="list-group-item checkbox">
    <input type="checkbox" class="" id="carousel" name="content" value="carousel">
    <label for="carousel">carousel</label>
    </div>
    <div class="list-group-item checkbox">
    <input type="checkbox" class="" id="video" name="content" value="video">
    <label for="video">video</label>
    </div>
    <div class="list-group-item checkbox">
    <input type="checkbox" class="" id="gif" name="content" value="gif">
    <label for="gif">gif</label>
    </div>
    <div class="list-group-item checkbox">
    <input type="checkbox" class="" id="dpa" name="content" value="dpa">
    <label for="dpa">dpa</label>
    </div>
    <div class="list-group-item checkbox">
    <input type="checkbox" class="" id="stories" name="content" value="stories">
    <label for="stories">stories</label>
    </div>
    <div class="list-group-item checkbox">
    <input type="checkbox" class="" id="influencer" name="content" value="influencer">
    <label for="influencer">influencer</label>
    </div>
</div>
<div class="list-group">
<h3>Channels</h3>
    <div class="list-group-item checkbox">
    <label>
    <input type="checkbox" class="" name="channel" value="facebook-ads">
    facebook-ads
    </label>
    </div>
    <div class="list-group-item checkbox">
    <label>
    <input type="checkbox" class="" name="channel" value="instagram-ads">
    instagram-ads
    </label>
    </div>
    <div class="list-group-item checkbox">
    <label>
    <input type="checkbox" class="" name="channel" value="google-ads">
    google-ads
    </label>
    </div>
    <div class="list-group-item checkbox">
    <label>
    <input type="checkbox" class="" name="channel" value="microsoft-ads">
    microsoft-ads
    </label>
    </div>
    <div class="list-group-item checkbox">
    <label>
    <input type="checkbox" class="" name="channel" value="tiktok-ads">
    tiktok-ads
    </label>
    </div>
    <div class="list-group-item checkbox">
    <label>
    <input type="checkbox" class="" name="channel" value="snapchat-ads">
    snapchat-ads
    </label>
    </div>
    <div class="list-group-item checkbox">
    <label>
    <input type="checkbox" class="" name="channel" value="youtube-ads">
    youtube-ads
    </label>
    </div>
    <div class="list-group-item checkbox">
    <label>
    <input type="checkbox" class="" name="channel" value="pinterest-ads">
    pinterest-ads
    </label>
    </div>
    <div class="list-group-item checkbox">
    <label>
    <input type="checkbox" class="" name="channel" value="podcast-ads">
    podcast-ads
    </label>
    </div>
</div> 
<button id="select">Apply Filter</button>
</form>

​

当然，您应该使用它通过AJAX调用或简单地替换当前的document.location.href来应用您的过滤器设置，而不是只用console.log()显示新的位置字符串。