Form with checkboxes pass to ajax - php

Question

I'm using Laravel 4 on this. I have a form with a list of departments in which there are members per department. I used an accordion to place all members under one checkbox of department. Now when I check the checkbox and submit it I want it to be posted on my ajax.
Here's what I can do but found an error.
Syntax error, unrecognized expression: input[name=dept_id:checked
HTML
<div class="col-md-6 col-sm-6">
<div class="blue-steel box portlet">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-calendar"></i>Bulk select Department off day
</div>
</div><!-- /.portlet-title -->
<div class="portlet-body form">
<div class="form-body">
{{Form::open(['url'=>url('admin/schedule'), 'id' => 'department_bulk_off_day', 'class'=>'form-horizontal', 'method'=>'GET'])}}
<div class="form-group">
<label class="col-md-3 control-label" style="padding-left: 0px;">Select Department</label>
<div class="col-md-9">
<!-- <div id="accordion">
<h3><span id="id"><input type="checkbox"/></span>Text More text </h3>
<div>content etc</div>
</div> -->
<div class="employee_checkbox_wrapper" id="accordion">
<?php $department = DB::table('department')->get(); ?>
#foreach($department as $key => $val)
<label><span id="id"><input type="checkbox" name="dept_id[]" value="{{ $val->id }}"/></span>{{ $val->deptName }} </label>
<div>
<?php
$dept_id = $val->id;
$schedule = '';
$desig_ids = DB::table('designation')->where('deptID', $dept_id)->get();
foreach ($desig_ids as $desig_id) {
$emp_des = $desig_id->id;
$employee_desigs = DB::table('employees')->where('designation', $emp_des)->get();
foreach ($employee_desigs as $employee_desig) {
?>
<label style="margin-left: 15px;"><!-- <input type="checkbox" name="employee_id[]" value="{{ $employee_desig->id }}"/> -->
{{ $employee_desig->fullName }}
</label>
<a data-toggle="modal" data-id="{{ $employee_desig->id }}" data-target="#myModal" title="Add this item" class="open-AddBookDialog btn " href="#addBookDialog">
Change Department
</a>
</br>
<?php
}
}
?>
</div>
#endforeach
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" style="margin-top: 20px;">Select Date</label>
<div class="col-md-3">
<div class="input-group input-medium date date-picker" data-date-format="dd-mm-yyyy" data-date-viewmode="years" style="margin-top: 20px;">
<input type="text" class="form-control" name="off_day" value="{{ date('d-m-Y') }}">
<span class="input-group-btn">
<button class="btn default" type="button"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-md-12 text-center">
{{Form::token()}}
<input type="hidden" name="department_bulk_off_day" value="2">
<button class="btn btn-button button-tip-form-submit">Update</button>
</div><!-- /.col-md-12 text-center -->
</div>
</form><!-- /.form-horizontal -->
</div><!-- /.form-body -->
{{ Form::close() }}
</div><!-- /.portlet-body form -->
</div><!-- /.blue-steel box portlet -->
</div><!-- /.col-md-6 col-sm-6 -->
And here's my JS
<script>
$('#department_bulk_off_day').on('submit', function(e){
e.preventDefault();
var checkValues = jQuery('input[name=dept_id:checked').map(function()
{
return $(this).val();
}).get();
alert(checkValues);
</script>

Answer 1

you can try the following code
var checkValues = jQuery('input[name="dept_id"]').map(function()
{
var this_var = $(this);
if($(this):checked){
return this_var.val();
}
}).get();

Answer 2

Try This. You have the selectors all messed up.
$('#department_bulk_off_day').on('submit', function(e){
e.preventDefault();
var checkValues = $('input[name="dept_id"]:checked').map(function()
{
return $(this).val();
}).get();
alert(checkValues);