多选复选框Ajax操作数据库时重复值错误求助

我实现了一个包含30-80个选项的多选复选框功能，通过Ajax完成：点击复选框勾选时将对应记录存入数据库，取消勾选时从数据库删除该记录。但选中第25至26条记录时，系统提示值重复错误——所有复选框的value都是唯一的，错误日志却指向第一个选中的复选框的值。另外，点击全选按钮（Toggle All）批量勾选所有选项并存入数据库时无异常。

相关代码 #

HTML 复选框部分 #

<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>
@foreach ($counties as $county)
    <li>
        <input class="checkIt" type="checkbox" id="cnty_id" name="cnty_id"
        value="{{ $county->id }}" @foreach($jct_fr_cnty as $jct) @if($jct->cnty_id == $county->id) checked @endif @endforeach>
        {{ $county->county }}
    </li>
@endforeach

Ajax 处理代码 #

$('.checkIt').bind('click', function() {
    if($(this).is(":checked")) {
        console.log("Checked");
        $.ajax({
            type: "POST",
            url: '{{ url('company/assignment/interstate/cntys') }}',
            data: $("#cntyselectform").serialize()
        }).done(function( result ) {
            console.log(result);
        });
    } else {
        console.log("Unchecked");
        $.ajax({
            type: "DELETE",
            url: '{{ url('company/assignment/interstate/cntysrem') }}',
            data: $("#cntyselectform").serialize()
        })
    }
});

Laravel 控制器代码 #

public function postcntyinterstate(Request $request)
{
    jct_fr_cnty::create([
        'cmp_id' => $request->cmp_id,
        'cnty_id' => $request->cnty_id,
        'svc_id' => $request->svc_id
    ]);

    return response()->json(['success'=>'Data is successfully added']);
}

全选按钮逻辑 #

function toggle(source) {
    checkboxes = document.getElementsByName('cnty_id');
    for (var i = 0, n = checkboxes.length; i < n; i++) {
        checkboxes[i].checked = source.checked;
        console.log("Checked");
        $.ajax({
            type: "POST",
            url: '{{ url('company/assignment/interstate/cntys') }}',
            data: $("#cntyselectform").serialize()
        }).done(function(result) {
            console.log(result);
        });
    }
}

完整表单代码 #

<form id="cntyselectform" method="POST"
action="{{ route('company.cntyinterstate', ['company' => $company->id]) }}">
    @csrf
    <div class="col-lg-12 mb-3 mt-3 mb-sm-0">
        <h3>Please select counties</h3>
        <div name="cntSelect[]" id="cntSelect">
            <ul>
                <input type="checkbox" onClick="toggle(this)" /> Toggle All<br />
                @foreach ($counties as $county)
                    <li>
                        <input class="checkIt" type="checkbox" id="cnty_id" name="cnty_id"
                            value="{{ $county->id }}"
                            @foreach ($jct_fr_cnty as $jct) @if ($jct->cnty_id == $county->id) checked @endif @endforeach>
                        {{ $county->county }}
                    </li>
                @endforeach
            </ul>
        </div>
        <input type="hidden" value="{{ $company->id }}" name="cmp_id" id="cmp_id">
        <input type="hidden" value="1" name="svc_id" id="svc_id">
    </div>
</form>

数据库表结构 #

表jct_fr_cnty包含字段：id（自增主键）、cmp_id、cnty_id、svc_id，且cmp_id+cnty_id+svc_id设置了联合唯一约束。

问题原因 #

1. 单个复选框点击的提交漏洞：点击单个复选框时，$("#cntyselectform").serialize()会把所有已勾选的复选框的cnty_id值都提交到后端，但Laravel中$request->cnty_id接收多个同名参数时，只会返回第一个值。如果之前已经选中过其他复选框，后端会重复插入第一个选中的cnty_id记录，触发联合唯一约束错误。
2. 全选功能无异常的原因：全选时循环每个复选框，设置状态后立即提交——此时每次循环中只有当前操作的复选框被勾选（或刚被勾选），表单序列化后只会提交当前的cnty_id，不会重复插入已有记录。

修复方案 #

1. 修改复选框名称（规范多选表单） #

将所有复选框的name="cnty_id"改为name="cnty_id[]"，符合HTML多选表单的参数传递规范。

2. 调整Ajax逻辑，仅提交当前操作的复选框ID #

不需要序列化整个表单，只收集当前点击的复选框ID和必要的隐藏域参数，避免提交冗余数据：

$('.checkIt').on('click', function() {
    const $currentCheckbox = $(this);
    const submitData = {
        _token: $('input[name="_token"]').val(),
        cmp_id: $('#cmp_id').val(),
        svc_id: $('#svc_id').val(),
        cnty_id: $currentCheckbox.val()
    };

    if ($currentCheckbox.is(":checked")) {
        console.log("Checked");
        $.ajax({
            type: "POST",
            url: '{{ url('company/assignment/interstate/cntys') }}',
            data: submitData
        }).done(function(result) {
            console.log(result);
        });
    } else {
        console.log("Unchecked");
        $.ajax({
            type: "DELETE",
            url: '{{ url('company/assignment/interstate/cntysrem') }}',
            data: submitData
        });
    }
});

3. 优化全选按钮逻辑（减少冗余请求） #

仅处理状态发生变化的复选框，避免重复提交已勾选/已取消的项：

function toggle(source) {
    const checkboxes = document.getElementsByName('cnty_id[]');
    const targetCheckedState = source.checked;
    const baseData = {
        _token: $('input[name="_token"]').val(),
        cmp_id: $('#cmp_id').val(),
        svc_id: $('#svc_id').val()
    };

    for (let i = 0; i < checkboxes.length; i++) {
        const checkbox = checkboxes[i];
        if (checkbox.checked !== targetCheckedState) {
            checkbox.checked = targetCheckedState;
            const submitData = {...baseData, cnty_id: checkbox.value};
            const requestType = targetCheckedState ? "POST" : "DELETE";
            const requestUrl = targetCheckedState 
                ? '{{ url('company/assignment/interstate/cntys') }}' 
                : '{{ url('company/assignment/interstate/cntysrem') }}';

            $.ajax({
                type: requestType,
                url: requestUrl,
                data: submitData
            }).done(function(result) {
                console.log(result);
            });
        }
    }
}

4. 增强控制器健壮性（可选） #

在插入前检查记录是否已存在，避免因前端逻辑漏洞导致的重复错误：

public function postcntyinterstate(Request $request)
{
    $exists = jct_fr_cnty::where([
        'cmp_id' => $request->cmp_id,
        'cnty_id' => $request->cnty_id,
        'svc_id' => $request->svc_id
    ])->exists();

    if (!$exists) {
        jct_fr_cnty::create([
            'cmp_id' => $request->cmp_id,
            'cnty_id' => $request->cnty_id,
            'svc_id' => $request->svc_id
        ]);
        return response()->json(['success'=>'数据添加成功']);
    }

    return response()->json(['info'=>'记录已存在']);
}

内容的提问来源于stack exchange，提问作者Doctor Nasty