PHP 處理多個同名複選框：表單陣列命名與 JavaScript 預處理方案

HTML 表單中多個同名複選框，PHP 預設不會自動轉為陣列（需在 name 加 []）。本文說明標準做法、JavaScript 預處理替代方案與最佳實務。

標準做法：name 加上 []（推薦）

<form method="post" action="process.php">
    <input type="checkbox" name="items[]" value="1"> 項目 1<br>
    <input type="checkbox" name="items[]" value="2"> 項目 2<br>
    <input type="checkbox" name="items[]" value="3"> 項目 3<br>
    <input type="checkbox" name="items[]" value="4"> 項目 4<br>
    <input type="submit" value="送出">
</form>

<?php
// process.php
$items = $_POST['items'] ?? []; // 自動為陣列
// $items = ['1', '3'] (勾選 1 和 3)

foreach ($items as $item) {
    echo "選中: $item\n";
}
?>

不加 [] 的處理方式（舊專案相容）

<!-- HTML: name="item" 不加 [] -->
<input type="checkbox" name="item" value="1">
<input type="checkbox" name="item" value="2">
<input type="checkbox" name="item" value="3">

<?php
// PHP 只會收到最後一個勾選的值
$item = $_POST['item'] ?? ''; // 單一字串
?>

JavaScript 預處理解決方案（不修改 name）

<form name="form1" id="form1" method="post" action="process.php" onsubmit="return prepareCheckboxes()">
    <input type="checkbox" name="item" value="1"> 項目 1<br>
    <input type="checkbox" name="item" value="2"> 項目 2<br>
    <input type="checkbox" name="item" value="3"> 項目 3<br>
    <input type="checkbox" name="item" value="4"> 項目 4<br>
    <input type="hidden" name="items" id="items" value="">
    <input type="submit" value="送出">
</form>

<script>
function prepareCheckboxes() {
    const checkboxes = document.form1.item; // 同名元素自動為 HTMLCollection
    const values = [];
    
    // 處理單一/多個複選框的差異
    if (checkboxes.length === undefined) {
        // 單一複選框
        if (checkboxes.checked) values.push(checkboxes.value);
    } else {
        // 多個複選框
        for (let i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].checked) values.push(checkboxes[i].value);
        }
    }
    
    // 以 JSON 格式儲存至隱藏欄位（避免分隔符衝突）
    document.getElementById('items').value = JSON.stringify(values);
    return true;
}
</script>

<?php
// process.php
$items = json_decode($_POST['items'] ?? '[]', true);
// $items = ['1', '3'] 陣列格式
?>

方案比較與選型建議

進階：多組複選框群組

<form method="post">
    <fieldset>
        <legend>顏色</legend>
        <input type="checkbox" name="colors[]" value="red"> 紅
        <input type="checkbox" name="colors[]" value="blue"> 藍
    </fieldset>
    
    <fieldset>
        <legend>尺寸</legend>
        <input type="checkbox" name="sizes[]" value="S"> S
        <input type="checkbox" name="sizes[]" value="M"> M
        <input type="checkbox" name="sizes[]" value="L"> L
    </fieldset>
    
    <input type="submit">
</form>

<?php
// $_POST['colors'] = ['red']
// $_POST['sizes'] = ['S', 'M']
?>

安全性提醒

• 永遠驗證提交值是否在允許清單中（白名單驗證）
• 使用 htmlspecialchars() 輸出防 XSS
• CSRF Token 保護表單提交
• 資料庫操作使用預處理語句

現代專案首選 name="field[]" 標準寫法，簡潔、可靠、無需 JavaScript 依賴。僅在無法修改 HTML 時考慮 JS 預處理方案。