勾选单个/多个Checkbox时触发Ajax并传递选中值数组至PHP的问题求助

我来帮你修复代码，先拆解下原JavaScript里的几个核心问题：

• 每次点击复选框才给表单绑定submit事件，多次点击会重复绑定，导致一次提交触发多轮请求
• 只传递了当前点击的单个sid，没有收集所有选中的复选框值
• $('.clickBtn').trigger()缺少指定事件类型，没法正常触发按钮行为
• 表单提交的默认跳转行为没阻止，会直接刷新页面

下面给你两种可行的解决方法，你可以根据需求选择：

方法一：通过触发隐藏按钮实现（符合你的初始设想） #

首先调整JavaScript逻辑，提前绑定表单的submit事件（只绑定一次），然后在复选框点击时，只要有选中项就触发隐藏按钮的点击，同时收集所有选中的sid数组：

// 提前绑定表单submit事件，仅执行一次绑定
$('#formId').submit(function(e) {
    // 阻止表单默认提交行为，避免页面跳转
    e.preventDefault();
    
    // 收集所有选中的sid值，组装成数组
    let selectedSids = [];
    $('.supplierClass:checked').each(function() {
        selectedSids.push($(this).val());
    });
    
    // 可选：如果没有选中项，给出提示并终止请求
    if(selectedSids.length === 0) {
        $('.allVehicle').html('请至少选择一个供应商');
        return;
    }
    
    $.ajax({
        url: 'process/get-vehicle.php',
        type: 'POST',
        dataType: 'html',
        data: {
            sid: selectedSids  // 传递选中的sid数组
        },
        beforeSend: function() {
            $('.allVehicle').html('Please wait...');
        },
        success: function(result) {
            $('.allVehicle').html(result);
        }
    });
});

// 复选框点击事件：检测是否有选中项，有则触发隐藏按钮
$('.supplierClass').click(function() {
    let hasChecked = $('.supplierClass:checked').length > 0;
    if(hasChecked) {
        // 触发隐藏按钮的点击事件，进而触发表单submit
        $('.clickBtn').trigger('click');
    } else {
        // 可选：全部取消勾选时清空内容
        $('.allVehicle').html('');
    }
});

另外要修改你的隐藏按钮类型，原代码是type="hidden"，需要改成type="submit"才能触发表单提交，同时保持隐藏样式：

// 把hidden改为submit，添加display:none保持隐藏
echo '<input type="submit" name="submit" value="supplier" class="clickBtn" style="display:none;">';

方法二：直接在复选框点击时处理（更简洁，无需隐藏按钮） #

如果不需要依赖隐藏按钮，也可以直接在复选框点击时收集选中项并发送Ajax，代码更精简：

$('.supplierClass').click(function() {
    // 快速收集选中的sid数组：map方法遍历，get()转成普通数组
    let selectedSids = $('.supplierClass:checked').map(function() {
        return $(this).val();
    }).get();
    
    if(selectedSids.length === 0) {
        $('.allVehicle').html('');
        return;
    }
    
    $.ajax({
        url: 'process/get-vehicle.php',
        type: 'POST',
        dataType: 'html',
        data: {
            sid: selectedSids
        },
        beforeSend: function() {
            $('.allVehicle').html('Please wait...');
        },
        success: function(result) {
            $('.allVehicle').html(result);
        }
    });
});

PHP处理端的注意事项 #

在process/get-vehicle.php里，你可以通过$_POST['sid']接收数组，记得做合法性验证：

if(isset($_POST['sid']) && is_array($_POST['sid'])) {
    // 把数组元素转成整数，防止SQL注入风险
    $sids = array_map('intval', $_POST['sid']);
    // 这里写你的业务逻辑，比如查询数据库等
} else {
    echo '请选择至少一个供应商';
}

这样就能实现你想要的功能：勾选至少一个复选框时，自动发送Ajax请求并传递所有选中的sid数组啦。

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