jquery复选框过滤搜索无效

Question

我不是编码专家，我一直在努力解决这个问题几个小时了。但是没有运气尝试了所有的东西，需要专家的帮助。

下面的脚本有4个函数:

1. 页码
2. 从文本输入字段发送数据。
3. 从下拉选项中发送数据
4. 从简单复选框发送数据。

最后一个复选框不工作，为什么?

<script>
$(document).ready(function(){
load_data(1);
function load_data(page,query,city,category)
{  

$.ajax({
url:"fetch_data.html",
method:"POST",
data:{page:page, query:query, city:city, category:category},
success:function(data)
{
$('#dynamic_content').html(data);
}
});
}
$(document).on('click', '.page-link', function(){
var page = $(this).data('page_number');
var query = $('#search_box').val();
var city = $('#multiple').val();
var category = $('#category').val();
load_data(page, query, city, category);
});
$('#search_box').keyup(function () {
var query = $('#search_box').val();
var city = $('#multiple').val();
var category = $('#category').val();
load_data(1, query, city, category);
});
$('#multiple').change(function () {
var query = $('#search_box').val();
var city = $('#multiple').val();
var category = $('#category').val();
load_data(1, query, city, category);
});
$('#category').change(function () {
var query = $('#search_box').val();
var city = $('#multiple').val();
var category = $('#category').val();
load_data(1, query, city, category);
});
$(function() {
$("#multiple").select2({
closeOnSelect : false,
placeholder : "Search City",
allowHtml: true,
allowClear: true,
tags: true
});
});

function iformat(icon, badge,) {
var originalOption = icon.element;
var originalOptionBadge = $(originalOption).data('badge');
return $('<span><i class="fa ' + $(originalOption).data('icon') + '"></i> ' +   icon.text + '<span class="badge">' + originalOptionBadge + '</span></span>');
}

});
</script>

这里是复选框代码

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

Answer 1

这可能是因为它们都有相同的id，如果你想获得这些被选中的值你想这样做:

$(function() {
$(":input[id^='category']:checked").each(function() {
console.log($(this).val())
})
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="category" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="category" name="vehicle2" value="Car" checked>
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="category" name="vehicle3" value="Boat" checked>
<label for="vehicle3"> I have a boat</label><br>

你可能要传递它作为一个数组嵌套项目在json对象到ajax调用，我希望这有助于