带有复选框的表单传递给ajax

Question

我正在使用 Laravel 4。我有一个包含部门列表的表格，其中每个部门都有成员。我使用手风琴将所有成员放在部门的一个复选框下。现在，当我选中复选框并提交时，我希望它发布在我的 ajax 上。

这是我可以做的，但发现了一个错误。

语法错误，无法识别的表达式：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><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="{{ $val->id }}"/></span>{{ $val->deptName }} </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="{{ $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 -->

这是我的 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

你可以试试下面的代码

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

Answer 2

试试这个。你把选择器弄乱了。

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