jQuery ajax筛选搜索功能中checkbox传值不生效问题求助

你的代码存在3个核心问题，直接导致复选框功能无法正常运行：

• id重复违反HTML规范：3个复选框全部设置了相同的id="category"，而HTML要求同页面id必须唯一。jQuery通过$('#category')选择元素时，只会匹配到第一个复选框，既拿不到后两个复选框的状态，change事件也只会绑定到第一个复选框上，后两个复选框点击时完全不会触发筛选逻辑。另外你写的label的for属性和input的id不匹配，点击复选框对应的文字也无法选中选项。
• 取值逻辑错误：直接对复选框调用.val()只能拿到元素预设的value属性值，不会判断复选框是否被选中，更无法收集多个选中项的值，传给后端的参数永远是第一个复选框的"Bike"，和实际选中状态完全不符。
• 初始传参不完整：首次调用load_data(1)时没有传入query、city、category参数，参数值为undefined，容易和后端接收逻辑冲突导致报错。

1. 修正复选框HTML代码 #

删除重复的id，给复选框加统一类名方便批量选择，同时修正id和label的for属性对应关系：

<input type="checkbox" class="category-check" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" class="category-check" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" class="category-check" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>

2. 新增公共方法获取选中的分类值 #

在script标签里加一个专门收集选中复选框值的函数，返回所有选中项组成的数组，方便各处调用：

function getSelectedCategories() {
  const selectedCats = [];
  $('.category-check:checked').each(function () {
    selectedCats.push($(this).val());
  });
  return selectedCats;
}

3. 替换所有旧的category取值逻辑 #

把代码里所有var category = $('#category').val();全部替换为var category = getSelectedCategories();，覆盖分页点击、搜索框输入、select2选项变化这几个场景的取值逻辑。

4. 修改复选框的change事件绑定 #

把原来绑定到#category的事件，改成绑定到所有分类复选框上：

$('.category-check').change(function () {
  var query = $('#search_box').val();
  var city = $('#multiple').val();
  var category = getSelectedCategories();
  load_data(1, query, city, category);
});

5. 修正初始加载参数 #

把首次调用的load_data(1);改成load_data(1, '', '', []);，避免初始请求出现undefined参数。

注意：修改后前端传给后端的category参数是数组格式（比如同时选Bike和Car时，参数值为["Bike","Car"]），后端需要按数组类型接收该参数做筛选逻辑匹配。

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