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

Question

我有一个带有 2 组复选框的表单，其中的视图可能是 3 或 4 个。

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

当用户选择复选框时，我想更新 URL 并使用我将用于过滤内容的参数进行刷新。

我想要的网址：

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

我正在获取的网址：

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

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

我想使用下划线分隔复选框选择，此时我很高兴刷新页面。

我很欣赏这对某些人来说可能非常简单，但 Javascript 不是我的菜，我打开了大约 20 个标签。任何帮助表示赞赏。

这是示例表单（请忽略两种不同的复选框 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>

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