如何将三类求职筛选复选框参数拼接为指定格式的URL参数

核心思路 #

不用拆分多个表单，把所有筛选复选框放在同一个表单内，分别收集三类筛选器的选中值，再拼接成符合要求的URL查询参数。

修改后的HTML代码 #

<form id="myform">
  <!-- 职位类型筛选器 -->
  <div class="form-group">
    <h3>职位类型</h3>
    <input type="checkbox" name="JT" value="1">
    <label>全职</label>
    <input type="checkbox" name="JT" value="2">
    <label>兼职</label>
    <input type="checkbox" name="JT" value="3">
    <label>实习</label>
  </div>

  <!-- 地区名称筛选器 -->
  <div class="form-group">
    <h3>地区名称</h3>
    <input type="checkbox" name="RN" value="1">
    <label>北京</label>
    <input type="checkbox" name="RN" value="2">
    <label>上海</label>
    <input type="checkbox" name="RN" value="3">
    <label>广州</label>
  </div>

  <!-- 薪资范围筛选器 -->
  <div class="form-group">
    <h3>薪资范围</h3>
    <input type="checkbox" name="SR" value="1">
    <label>5k-10k</label>
    <input type="checkbox" name="SR" value="2">
    <label>10k-20k</label>
    <input type="checkbox" name="SR" value="3">
    <label>20k+</label>
  </div>

  <div class="form-group">
    <button type="submit" class="button button1">提交筛选</button>
  </div>
</form>

对应的JavaScript代码 #

document.addEventListener("DOMContentLoaded", function() {
  const form = document.getElementById('myform');
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    
    // 定义需要处理的筛选参数类型
    const filterTypes = ['JT', 'RN', 'SR'];
    const queryParams = [];

    filterTypes.forEach(type => {
      // 收集当前类型下所有选中的复选框值
      const checkedValues = Array.from(document.getElementsByName(type))
        .filter(checkbox => checkbox.checked)
        .map(checkbox => checkbox.value);
      
      // 如果有选中值，就添加到参数列表
      if (checkedValues.length > 0) {
        queryParams.push(`${type}=${checkedValues.join(',')}`);
      }
    });

    // 拼接成完整的URL并跳转
    const queryString = queryParams.join('&');
    window.location = queryString ? `/?${queryString}` : '/';
  });
});

代码说明 #

1. 所有筛选器统一放在一个表单里，彻底避免多表单冲突问题。
2. 通过filterTypes数组批量处理三类筛选参数，代码简洁且后续新增筛选类型时只需修改数组即可。
3. 仅当某类筛选器有选中值时，才会将该参数添加到URL中，避免出现空参数（比如/?JT=&RN=2这类无效格式）。
4. 使用Array.from将DOM元素集合转为数组，方便用filter和map快速处理选中值。

内容的提问来源于stack exchange，提问作者Darren