GET方法提交表单时如何将多个复选框值合并为单个参数字符串

问题核心原因 #

你现有代码的问题主要有两个：

• PHP是服务端脚本，仅在页面请求/提交后才会执行，无法在用户勾选复选框、点击提交按钮前就完成值的拼接写入隐藏域
• 你没有在循环外声明变量存储拼接结果，循环内的$color仅为单次循环的临时变量，循环外直接调用只能拿到最后一个遍历到的值，也无法完成拼接需求

最优实现方案：前端JS提交前处理 #

不需要依赖服务端逻辑，直接在用户点击提交时拼接选中的复选框值，赋值给单独的隐藏字段提交即可，最终请求URL会直接符合你要的格式：

<form action="" method="get">
    Red<input type="checkbox" class="color-checkbox" value="Red">
    Green<input type="checkbox" class="color-checkbox" value="Green">
    Blue<input type="checkbox" class="color-checkbox" value="Blue">
    <!-- 隐藏字段用来传拼接后的颜色值，参数名直接设为color -->
    <input type="hidden" name="color" id="color-hidden" value="">
    <input type="submit" value="submit" id="submit-btn">
</form>

<script>
document.getElementById('submit-btn').addEventListener('click', function(e) {
    // 阻止默认提交先做处理
    e.preventDefault();
    let checkedColors = '';
    // 遍历所有选中的复选框
    document.querySelectorAll('.color-checkbox:checked').forEach(item => {
        checkedColors += item.value;
    });
    // 赋值给隐藏字段
    document.getElementById('color-hidden').value = checkedColors;
    // 提交表单
    document.querySelector('form').submit();
});
</script>

提交后你得到的请求地址就会是example.com?color=RedGreenBlue的格式，直接在接收页拿$_GET['color']就是完整的拼接字符串，不需要额外处理。

如果你一定要用服务端PHP处理 #

需要调整逻辑，先接收数组参数，拼接后如果要跳转再构造目标URL跳转即可：

<?php
// 页面加载时先判断是否有提交的color数组
if (isset($_GET['color']) && is_array($_GET['color'])) {
    // 拼接数组为字符串
    $colorStr = implode('', $_GET['color']);
    // 跳转到目标地址，带上拼接后的参数
    header("Location: https://example.com?color=" . $colorStr);
    exit;
}
?>
<form action="" method="get">
    Red<input type="checkbox" name="color[]" value="Red">
    Green<input type="checkbox" name="color[]" value="Green">
    Blue<input type="checkbox" name="color[]" value="Blue">
    <input type="submit" value="submit">
</form>

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