先生と生徒の会話形式で理解しよう

生徒

「先生、Laravelでチェックボックスやラジオボタンをフォームに入れたいんですが、どうやって値を受け取ればいいですか？」

先生

「チェックボックスやラジオボタンはHTMLではタグの一種で、ユーザーが選択した値をサーバーに送信するために使います。LaravelではRequestオブジェクトで簡単に受け取れます。」

生徒

「複数選択できるチェックボックスの場合はどうすればいいですか？」

先生

「チェックボックスの場合は名前に[]を付けることで配列として送信できます。ラジオボタンは同じ名前にして選択肢を作ると1つだけ値を受け取れます。」

1. Bladeでチェックボックスフォームを作る

Bladeテンプレートで複数選択可能なチェックボックスを作る例です。


<form action="{{ route('form.submit') }}" method="POST">
    @csrf
    <label><input type="checkbox" name="hobbies[]" value="読書" {{ in_array('読書', old('hobbies', [])) ? 'checked' : '' }}> 読書</label>
    <label><input type="checkbox" name="hobbies[]" value="映画" {{ in_array('映画', old('hobbies', [])) ? 'checked' : '' }}> 映画</label>
    <label><input type="checkbox" name="hobbies[]" value="旅行" {{ in_array('旅行', old('hobbies', [])) ? 'checked' : '' }}> 旅行</label>
    <button type="submit" class="btn btn-primary">送信</button>
</form>

ここでold()はバリデーションエラー後にチェック状態を保持するために使います。

2. Bladeでラジオボタンフォームを作る

次に1つだけ選択可能なラジオボタンの例です。


<form action="{{ route('form.submit') }}" method="POST">
    @csrf
    <label><input type="radio" name="gender" value="男性" {{ old('gender') == '男性' ? 'checked' : '' }}> 男性</label>
    <label><input type="radio" name="gender" value="女性" {{ old('gender') == '女性' ? 'checked' : '' }}> 女性</label>
    <button type="submit" class="btn btn-primary">送信</button>
</form>

ラジオボタンは同じ名前にすることで1つだけ選択可能になります。old('gender')で前回の選択を保持します。

3. Controllerで値を受け取る

Controller側ではRequestオブジェクトを使って値を取得できます。


public function submit(Request $request)
{
    $request->validate([
        'hobbies' => 'required|array',
        'gender' => 'required|string',
    ]);

    $hobbies = $request->input('hobbies'); // 配列として取得
    $gender = $request->input('gender');   // 単一値として取得

    // データベース保存や処理をここで行う
}

ポイントはチェックボックスは配列で受け取り、ラジオボタンは単一値で受け取ることです。

4. バリデーションとエラー表示

Laravelではチェックボックスやラジオボタンもバリデーション可能です。必須チェックなどを行うことで、ユーザーの入力漏れを防げます。


@if ($errors->has('hobbies'))
    <div class="text-danger">{{ $errors->first('hobbies') }}</div>
@endif

@if ($errors->has('gender'))
    <div class="text-danger">{{ $errors->first('gender') }}</div>
@endif

これで、未選択の場合にエラーメッセージを表示できます。