Laravel+JavaScript多开关复选框联动存储异常问题求助

问题根源 #

你的click_switch函数中，使用$(".id-target").val()会选中所有class为id-target的复选框，导致修改任意一个开关时，所有开关的value被同步修改，最终提交时所有状态一致。

1. 修改JavaScript函数 #

只操作当前点击的开关，确保每个开关的value独立更新：

function click_switch(el) {
    if (el.checked) {
        $(el).val("on");
    } else {
        $(el).val("off"); // 设为'off'而非空值，方便后端统一处理
    }
}

2. 优化Blade模板（规范写法） #

添加CSRF令牌（Laravel必填），简化checked判断逻辑：

<form action="{{ route('admin.settings.post') }}" method="POST">
    @csrf

    <label class="switch">
        <input class="id-target" onchange="click_switch(this)" 
               value="{{ $post ?? 'off' }}" name="post" 
               type="checkbox" {{ $post == 'on' ? 'checked' : '' }}>
        <span class="slider round"></span>
    </label>

    <label class="switch">
        <input class="id-target" onchange="click_switch(this)" 
               value="{{ $product ?? 'off' }}" name="product" 
               type="checkbox" {{ $product == 'on' ? 'checked' : '' }}>
        <span class="slider round"></span>
    </label>

    <label class="switch">
        <input class="id-target" onchange="click_switch(this)" 
               value="{{ $course ?? 'off' }}" name="course" 
               type="checkbox" {{ $course == 'on' ? 'checked' : '' }}>
        <span class="slider round"></span>
    </label>

    <button class="btn" type="submit">save</button>
</form>

3. 后端控制器处理 #

未选中的复选框不会被提交到后端，因此需要通过$request->has()判断状态，再保存到数据库：

public function store(Request $request)
{
    // 逐个获取开关状态，存在则为'on'，否则为'off'
    $statusData = [
        'post' => $request->has('post') ? 'on' : 'off',
        'product' => $request->has('product') ? 'on' : 'off',
        'course' => $request->has('course') ? 'on' : 'off',
    ];

    // 示例：更新数据库设置（根据你的模型调整）
    Setting::updateOrCreate(
        ['id' => 1], // 假设设置表只有一条全局配置记录
        $statusData
    );

    return redirect()->back()->with('success', '设置已保存');
}

核心逻辑说明 #

• 前端JS仅修改当前点击的复选框value，保证各开关状态独立。
• 后端通过$request->has()判断复选框是否被提交（选中状态），统一处理'on'/'off'值后存入数据库。

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