基于URL参数勾选对应Checkbox的问题求助

问题原因分析 #

你的代码存在两个关键错误导致功能失效：

• 变量名不一致：定义了var url = new URL(window.location);，但后续错误使用未声明的current_url，无法正常获取URL查询参数。
• 选择器未动态插入变量：$( "input[value=brand_value]" )中的brand_value是固定字符串，不是变量值，无法匹配到对应value的复选框。

修正后的完整代码 #

HTML（无需修改）

<form method="GET">
 <label class="form-check mb-2">
  <input class="form-check-input" type="checkbox" name="brand" value="nike">
  <span class="form-check-label"> Nike </span>
</label>
<label class="form-check mb-2">
  <input class="form-check-input" type="checkbox" name="brand" value="adidas">
  <span class="form-check-label"> Adidas </span>
</label>
</form>

修正后的JavaScript

$(document).ready(function () {
  var url = new URL(window.location);
  var params = url.searchParams;
  var get_brandParams = params.getAll("brand");
  
  $.each(get_brandParams, function(key, value){
    // 使用模板字符串动态构建选择器，精准匹配对应品牌的复选框
    $(`input[name="brand"][value="${value}"]`).prop("checked", true); 
  })
})

关键修改说明 #

1. 统一变量名：将current_url改为url，确保能正确调用searchParams获取URL参数。
2. 动态选择器：使用ES6模板字符串`${value}`将循环中的参数值插入选择器，确保选中对应value的复选框。
3. 多参数兼容：params.getAll("brand")支持URL中多个brand参数（例如?brand=nike&brand=adidas），循环后可同时勾选多个复选框。

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