jQuery如何将checkbox选中值传入URL参数并解决多选值丢失问题

问题原因 #

原生表单GET提交name属性带[]的数组字段时，默认生成的参数格式为type[]=opt1&type[]=opt2，和你要求的自定义参数格式不符，因此不能直接触发表单提交，需要手动拼接URL后跳转。

解决代码 #

无需修改原有HTML，替换原有JS代码即可：

$(document).ready(function() {
  // 统一绑定所有checkbox的变更事件
  $(".type, .type1").change(function () {
    const basePath = "current.php";
    const paramSegments = [];

    // 收集第一组（type）选中值
    const typeSelected = $(".type:checked").map(function () {
      return $(this).val();
    }).get();
    if (typeSelected.length) {
      paramSegments.push("type=" + typeSelected.join("&"));
    }

    // 收集第二组（type2）选中值，对应你要求的参数名type1
    const type2Selected = $(".type1:checked").map(function () {
      return $(this).val();
    }).get();
    if (type2Selected.length) {
      paramSegments.push("type1=" + type2Selected.join("&"));
    }

    // 拼接URL跳转
    if (paramSegments.length) {
      window.location.href = basePath + "?" + paramSegments.join("?");
    } else {
      window.location.href = basePath;
    }
  });
});

注意事项 #

1. 你要求的URL格式包含多个?，不符合通用URL规范，后端无法直接通过常规$_GET方式读取参数，需要自行解析原始查询字符串处理。如果需要生成标准格式URL，只需要将paramSegments.join("?")改为paramSegments.join("&")即可，最终URL格式为current.php?type=opt1&opt2&type1=new1&new2。
2. 如果需要保留原有表单中的location隐藏字段参数，只需要在paramSegments数组最开头添加"location=location"即可。

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