Laravelでチェックボックスやラジオボタンを扱う方法

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

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でラジオボタンフォームを作る

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で値を受け取る

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. バリデーションとエラー表示

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

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

5. チェックボックス・ラジオボタン実装のポイント

5. チェックボックス・ラジオボタン実装のポイント

• チェックボックスは[]を付けて配列として送信
• ラジオボタンは同じ名前にして1つだけ選択可能にする
• old()を使ってバリデーション後も選択状態を保持
• ControllerでRequestから値を受け取り、必要に応じてバリデーションする
• エラーメッセージをBladeで表示してユーザーに入力ミスを知らせる