Laravel复选框多选值无法存储问题求助

问题背景 #

需要实现复选框多选值的存储：选中两个值（2和3）时返回'2,3'，单个选中时返回对应值，未选中时返回默认值1。初始代码存在多选仅返回第一个值的问题，修改后又出现返回null的情况。

初始代码问题分析 #

初始JS代码中，$('input[name="approved[]"]:checked').val() 只会返回第一个选中复选框的值，因此多选时只能拿到2，无法获取多个选中值。

修改后代码的null问题原因 #

1. 事件绑定时机错误：在点击提交按钮时才给复选框绑定change事件，此时change事件从未触发，checkedValues未被计算，变量自然无值。
2. 选择器无效：$('#approved') 找不到对应元素（修改后的HTML中没有id为approved的输入框），val()操作无效。
3. 变量赋值错误：var ans = $('#approved').val(checkedValues.join(',')); 中val()方法返回的是jQuery对象，不是设置的字符串值，导致传给后端的是无效对象。

正确实现方案 #

1. HTML 代码调整 #

保留复选框数组，同时添加hidden输入处理未选中的默认值：

<!-- 未选中任何复选框时，提交默认值1 -->
<input type="hidden" name="approved" value="1">
<input type="checkbox" name="approved[]" value="2" {{ in_array('2', old('approved', [])) ? 'checked' : '' }}>
<input type="checkbox" name="approved[]" value="3" {{ in_array('3', old('approved', [])) ? 'checked' : '' }}>

注：如果选中复选框，Laravel会优先接收数组形式的approved[]，自动忽略hidden的approved；未选中时则提交hidden的默认值1。

2. JS 提交逻辑修正 #

直接在提交时计算选中值，无需额外绑定change事件：

$('#submit-btn').on('click', function(event) {
    event.preventDefault();
    
    // 获取所有选中的复选框值，转为数组后拼接成字符串
    var checkedValues = $('input[name="approved[]"]:checked').map(function() {
        return this.value;
    }).get();
    
    // 处理未选中的情况，设置默认值1
    var approvedValue = checkedValues.length > 0 ? checkedValues.join(',') : '1';
    
    $.ajax({
        url: 'XXXXXX', // 替换为实际路由地址
        method: 'post',
        data: {
            _token: '{{ csrf_token() }}', // 必须携带Laravel CSRF令牌
            approved: approvedValue
        },
        success: function(response) {
            console.log('提交成功:', response);
        },
        error: function(xhr) {
            console.error('提交失败:', xhr.responseText);
        }
    });
});

3. 控制器代码调整 #

直接接收前端拼接好的字符串即可：

// 接收值，默认值设为1
$approved = $request->input('approved', '1');

// 后续存储逻辑示例
// YourModel::create(['approved' => $approved]);

如果需要兼容数组形式的提交（比如前端直接传数组），可改为：

$approvedData = $request->input('approved', []);
$approved = is_array($approvedData) ? implode(',', $approvedData) : $approvedData;

内容的提问来源于stack exchange，提问作者RA.IBOY