如何生成仅含参数名无值的URL查询字符串？HTML表单实现咨询

当然可行啦！不过原生HTML的默认行为确实会给选中的复选框加上=on的参数值，所以得稍微用点小技巧来实现你要的?mens&narrow这种格式的URL。下面给你两种实用的解决思路：

方法一：用JavaScript拦截提交，手动构造URL #

这是最直接的方式，通过监听表单的提交事件，阻止默认行为后自己拼接参数：

<form id="categoryForm" action="/category" method="GET">
  <input type="checkbox" name="mens"> Mens<br>
  <input type="checkbox" name="narrow"> Narrow<br>
  <button type="submit">Submit</button>
</form>

<script>
document.getElementById('categoryForm').addEventListener('submit', function(e) {
  // 阻止表单默认提交逻辑
  e.preventDefault();
  
  // 收集所有选中的复选框的name属性
  const checkedNames = Array.from(this.querySelectorAll('input[type="checkbox"]:checked'))
    .map(checkbox => checkbox.name);
  
  // 构造目标URL：action + ? + 用&拼接的参数名
  const targetUrl = `${this.action}?${checkedNames.join('&')}`;
  
  // 跳转到构造好的URL
  window.location.href = targetUrl;
});
</script>

这种方法的好处是完全掌控URL的结构，缺点是依赖JavaScript——如果用户禁用了JS，提交就会回到默认的=on格式。

方法二：用隐藏字段配合复选框（兼容降级场景） #

如果需要考虑JS禁用的情况，可以用隐藏字段来模拟无值参数：当复选框被选中时，动态添加一个只有name没有value的隐藏输入框；取消选中时移除它。表单提交时，这些隐藏字段会被自动带上，生成你要的URL格式：

<form action="/category" method="GET">
  <input type="checkbox" id="mensBox" name="temp_mens"> Mens<br>
  <input type="checkbox" id="narrowBox" name="temp_narrow"> Narrow<br>
  <button type="submit">Submit</button>
</form>

<script>
// 封装一个处理复选框切换的函数
function setupCheckbox(checkboxId, targetParamName) {
  const checkbox = document.getElementById(checkboxId);
  
  checkbox.addEventListener('change', function() {
    let hiddenInput = document.querySelector(`input[type="hidden"][name="${targetParamName}"]`);
    
    if (this.checked) {
      // 选中时，添加对应的隐藏字段（不设置value）
      if (!hiddenInput) {
        hiddenInput = document.createElement('input');
        hiddenInput.type = 'hidden';
        hiddenInput.name = targetParamName;
        this.form.appendChild(hiddenInput);
      }
    } else {
      // 取消选中时，移除隐藏字段
      if (hiddenInput) {
        hiddenInput.remove();
      }
    }
  });
}

// 为每个复选框初始化处理逻辑
setupCheckbox('mensBox', 'mens');
setupCheckbox('narrowBox', 'narrow');
</script>

如果用户禁用了JS，提交后会得到?temp_mens=on&temp_narrow=on，你可以在后端做一层映射处理，或者提前告知用户需要启用JS来获得最佳体验。

另外补充一句：如果后端逻辑只需要判断参数是否存在，其实即使是=on的格式也不影响——后端只需要检查mens参数是否存在，不用关心它的值。但如果确实要求URL的格式严格是无值参数，上面的前端方法就能满足需求。

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