Form with checkboxes pass to ajax

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">
      
        <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><a href="#"><span id="id"><input type="checkbox"/></span>Text More text </a></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><a href="#"><span id="id"><input type="checkbox" name="dept_id[]" value=""/></span> </a></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=""/>  -->
                            
                          </label>
                          <a data-toggle="modal" data-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="">
              <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">
            
            <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 -->
    
  </div><!-- /.portlet-body form -->
</div><!-- /.blue-steel box portlet -->

And here's my JS

 $('#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);

via Pro_Newbie