PHPでCSVからチェックボックスを生成する方法【サンプルコード付き】

php

PHPでCSVからチェックボックスを生成する方法

PHPでCSVファイルを読み込み、チェックボックスの選択肢を自動生成する方法を紹介します。CSVに登録されたデータをそのままフォームへ反映できるため、選択肢の追加や変更をCSVだけで管理できます。アンケートフォームやカテゴリ選択、商品オプション選択などに利用できるサンプルコードです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

カテゴリーを選択
選択結果：未選択

コードをコピーして使おう！

<?php

$options = [];

if (file_exists('data.csv')) {

    if (($fp = fopen('data.csv', 'r')) !== false) {

        while (($row = fgetcsv($fp)) !== false) {

            if (!empty($row[0])) {
                $options[] = $row[0];
            }

        }

        fclose($fp);

    }

}

?>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSVからチェックボックス生成</title>

<style>

body{
    font-family:sans-serif;
    margin:20px;
}

.checkbox-wrap{
    border:1px solid #e5e7eb;
    border-radius:20px;
    padding:24px;
}

.checkbox-title{
    font-size:28px;
    font-weight:700;
    margin-bottom:24px;
}

.checkbox-item{
    display:block;
    margin-bottom:18px;
    font-size:18px;
}

.result-box{
    margin-top:24px;
    padding:20px;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:16px;
    font-size:20px;
    font-weight:700;
}

</style>

</head>
<body>

<div class="checkbox-wrap">

    <div class="checkbox-title">
        カテゴリーを選択
    </div>

    <?php foreach ($options as $option): ?>

    <label class="checkbox-item">

        <input
            type="checkbox"
            class="category-checkbox"
            value="<?= htmlspecialchars($option, ENT_QUOTES, 'UTF-8') ?>">

        <?= htmlspecialchars($option, ENT_QUOTES, 'UTF-8') ?>

    </label>

    <?php endforeach; ?>

    <div class="result-box" id="result">
        選択結果：未選択
    </div>

</div>

<script>

const checkboxes =
document.querySelectorAll('.category-checkbox');

const result =
document.getElementById('result');

checkboxes.forEach(checkbox => {

    checkbox.addEventListener('change', () => {

        const selected = [...checkboxes]
            .filter(cb => cb.checked)
            .map(cb => cb.value);

        result.textContent =
            '選択結果：' +
            (selected.length
                ? selected.join('、')
                : '未選択');

    });

});

</script>

</body>
</html>

ファイル構成と設置方法

このサンプルで使用するファイル構成です。
下記のファイルを同じフォルダ（同じ階層）へ配置してください。 

sample/
├─ index.php
└─ data.csv

data.csv に保存されたデータを読み込み、チェックボックスを自動生成します。CSVの1列目の値がチェックボックスの選択肢として表示されます。

サーバーへ設置する場合は、上記ファイルを同じフォルダ（同じ階層）へアップロードしてください。別フォルダへ配置する場合は、コード内のファイルパス変更が必要になる場合があります。

PHPはサーバー上で実行されるため、PHPファイルをダブルクリックしても動作しません。動作確認はレンタルサーバーへアップロードするか、PHPが利用できるローカル環境で行ってください。

コメント