JavaScriptでラジオボタンの選択値を取得し、PHPへ送信する方法

JavaScriptでラジオボタンの値をPHPに送信する基本

フォーム内のラジオボタンで選択された値をJavaScript（jQuery）で取得し、PHP側に渡したいケースはWeb開発で非常によくあります。その際に最も重要なポイントのひとつが、IDはドキュメント内で一意である必要があるというHTMLの基本ルールです。複数の要素に同じIDを付与すると、セレクタが正しく機能せず、意図しない動作の原因になります。

ラジオボタングループのように同じ名前を共有する要素を扱う場合は、IDではなくname属性を使って選択するのが安全です。

jQueryでチェックされたラジオボタンの値を取得する

以下のコードでは、#controls 内にある name="option_avail" のラジオボタンのうち、チェックが入っているものの値を取得しています。

var option_avail = $('input[name=option_avail]:checked', '#controls').val();

:checked セレクタを組み合わせることで、グループ内で現在選択されているボタンだけを対象にできるのがポイントです。

サンプルとなるHTML構造

Bootstrapのボタンスタイルを利用した、3つの選択肢を持つラジオボタングループの例です。

<label class="btn btn-primary active">
    <input type="radio" class="form-control" name="option_avail" value="Option_one" checked /> firstoption
</label>
<label class="btn btn-primary">
    <input type="radio" class="form-control" name="option_avail" value="Option_two" /> secondoption
</label>
<label class="btn btn-primary">
    <input type="radio" class="form-control" name="option_avail" value="Option_three" /> thirdoption
</label>

この例では、すべてのラジオボタンが name="option_avail" を共有しており、それぞれ異なる value（Option_one / Option_two / Option_three）を持っています。ユーザーがいずれかを選択すると、先ほどのjQueryコードによってその値が option_avail 変数に格納されます。

取得した値をPHPへ送信する

取得した値は、Ajaxを使えばページ遷移なしでPHPに送信できます。

$.post('process.php', { option_avail: option_avail }, function(response) {
    console.log(response);
});

PHP側では次のように受け取ります。

<?php
$option = $_POST['option_avail'] ?? '';
echo '選択された値: ' . htmlspecialchars($option, ENT_QUOTES, 'UTF-8');

まとめ

• IDはドキュメント内で必ず一意にする。同名グループにはname属性を使う。
• $('input[name=xxx]:checked').val() で選択中のラジオボタンの値を取得できる。
• Ajax（$.post など）を使えば、取得した値をPHPに簡単に送信可能。