将多个复选框值onclick传递给控制器，以使用jQuery在Laravel中过滤查询

Question

我正在尝试用复选框获取按校园、年份和组筛选的学生人数。

我设法用Campus过滤了结果。实际上，对于这段代码，取消选中是不起作用的。它仍然发送校验值。

我需要将Campus、Group和year复选框值发送到控制器。控制器部分没有问题。一切都在起作用。如果我可以从复选框中发送正确的值，我的查询就可以工作了。我就是搞不懂jQuery部分。

感谢您的帮助。

var campus = [];
var getfilters = function () {
console.log(campus);
$.ajax({
type: 'POST',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url: 'URL...',
data: {
"campus": campus, 
"_token": "CSRF token..."
},
error: function(e) {
console.log(e.responseText);
},
success: function (data) {
console.log(data);
$('#gracebish').html(data)
}
});
};
$(document).ready(function() {
$('input[type="checkbox"]').on('change', function(event) {
event.preventDefault();
$.each($("input[name='campus']:checked"), function() {            
campus.push($(this).val());
});
$('#myResponse').html(); 
getfilters();
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-3">Campus</label>
<div class="col-sm-9">
<div class="col-xs-6">
<div class="checkbox checkbox-danger">
<input type="checkbox" name="campus" value="1" id="1"> <label for="1"> Campus1</label>
</div>
</div>
<div class="col-xs-6">
<div class="checkbox checkbox-danger">
<input type="checkbox" name="campus" value="2" id="2"> <label for="2"> Campus2</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Group</label>
<div class="col-sm-9">
<div class="col-xs-6">
<div class="checkbox checkbox-danger">
<input type="checkbox" name="group" value="3" id="group3"> <label for="group3"> 3 Year Old</label>
</div>
</div>
<div class="col-xs-6">
<div class="checkbox checkbox-danger">
<input type="checkbox" name="group" value="4" id="group4"> <label for="group4"> 4 Year Old</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Year</label>
<div class="col-sm-9">
<div class="col-xs-6">
<div class="checkbox checkbox-danger">
<input type="checkbox" name="year" value="{{date('Y')}}" id="year1"> <label for="year1">{{date('Y')}}</label>
</div>
</div>
<div class="col-xs-6">
<div class="checkbox checkbox-danger">
<input type="checkbox" name="year" value="{{date('Y', strtotime(" +1 year "))}}" id="year2"> <label for="year2">{{date('Y', strtotime("+1 year"))}}</label>
</div>
</div>
</div>
</div>

Answer 1

未经测试，但我认为即使您未选中，它仍会发送选中值的原因是因为您没有将campus数组重置回空数组。一种解决方案是在change函数中声明campus变量，并将其作为参数传递给getFilters函数。尝试

var getfilters = function (campus, group, year) {
...
}
$(document).ready(function() {
$('input[type="checkbox"]').on('change', function(event) {
event.preventDefault();
var campus = [];
var group = [];
var year = [];
$.each($("input[name='campus']:checked"), function() {            
campus.push($(this).val());
});

//do also the above on group and year
$('#myResponse').html(); 
getfilters(campus, group, year);
});
});