【HTML】ラジオボタンの初期値を設定する方法！未選択や動的な変更も解説

Webフォームを作成する際、ユーザーに複数の選択肢から一つを選んでもらう「ラジオボタン」は頻繁に使用されるパーツです。

このラジオボタンを設置する際、「最初から特定の項目を選んだ状態にしておきたい」、あるいは「あえて何も選ばれていない状態にしたい」と考えることはないでしょうか。

HTMLでは checked 属性を使うことで簡単に初期値を設定できますが、JavaScriptと組み合わせた動的な変更や、未選択状態の扱いには少し注意が必要です。

この記事では、HTMLのラジオボタンにおける初期値の設定方法について、基本的な書き方からJavaScriptでの操作、未選択状態の是非まで、実務で役立つ知識をサンプルコード付きで徹底解説します。

【本記事の信頼性】

執筆者：マヒロ

執筆者は元エンジニア
SES⇒大手の社内SE⇒独立
現在はこじんまりとしたプログラミングスクールを運営
モットーは「利他の精神」

HTMLでラジオボタンに初期値を設定する基本（checked属性）
1. 基本的な書き方
2. checked属性の記述バリエーション
ラジオボタンを「初期値なし（未選択）」にするメリット・デメリット
1. 初期値を設定しない（未選択）コード例
2. 未選択状態の注意点
JavaScriptを使って動的に初期値や選択状態を変更する
1. 特定の項目を選択状態にするコード
2. 選択されている値を取得する方法
初期値が反映されない？よくあるトラブルと解決策
HTML/CSSのスキルを活かして年収を上げる方法

HTMLでラジオボタンに初期値を設定する基本（checked属性）

ラジオボタンにあらかじめチェックを入れた状態で表示させるには、HTMLの checked 属性を使用します。

特別な値を指定する必要はなく、input タグの中に checked と記述するだけで機能します。

基本的な書き方

以下の例では、3つの選択肢のうち「銀行振込」が最初から選択された状態になります。

<form action="#" method="post">
    <p>お支払い方法を選択してください：</p>
    
    <label>
        <input type="radio" name="payment" value="credit"> クレジットカード
    </label>
    
    <label>
        <!-- ここに checked を記述 -->
        <input type="radio" name="payment" value="bank" checked> 銀行振込
    </label>
    
    <label>
        <input type="radio" name="payment" value="convenience"> コンビニ払い
    </label>
</form>

コードの解説

<input type="radio">：これがラジオボタンを作成するタグです。
name="payment"：複数のラジオボタンを一つのグループとして扱うために、同じ name 属性値を指定します。これが異なると、複数の項目を同時に選択できてしまうため注意が必要です。
checked：この属性が付いている要素が、ページ読み込み時に選択された状態（オン）になります。
label：文字をクリックしてもラジオボタンが反応するように、全体を label タグで囲んでいます。ユーザビリティ向上のために推奨される書き方です。

checked属性の記述バリエーション

HTMLの仕様上、checked 属性はいくつかの書き方が認められていますが、現代のWeb制作では以下のいずれかが一般的です。

<input type="radio" checked> （省略形・HTML5で推奨）
<input type="radio" checked="checked"> （XHTML互換形式）

どちらで書いても動作は同じですが、コードをシンプルに保つために 1. の省略形 を使うケースが増えています。

ラジオボタンを「初期値なし（未選択）」にするメリット・デメリット

あえて checked 属性を付けず、すべてのラジオボタンを未選択の状態で表示させることも可能です。

しかし、これにはメリットとデメリットが存在するため、フォームの目的によって使い分ける必要があります。

初期値を設定しない（未選択）コード例

<form action="#" method="post">
    <p>性別を選択してください：</p>
    
    <label>
        <input type="radio" name="gender" value="male"> 男性
    </label>
    
    <label>
        <input type="radio" name="gender" value="female"> 女性
    </label>
    
    <label>
        <input type="radio" name="gender" value="other"> その他
    </label>
</form>

どの input タグにも checked 属性が付いていません。

この状態でページを開くと、どの項目も選択されていない状態で表示されます。

未選択状態の注意点

メリット：ユーザーに能動的な選択を促すことができます。「意図せずデフォルト値のまま送信してしまった」というミスを防げます。
デメリット：ユーザーが選択を忘れたまま送信してしまうリスクがあります。また、一度選択すると（JavaScript等を使わない限り）ユーザー操作だけで「未選択」に戻すことはできません。

未選択状態にする場合は、送信時にエラーにならないよう、required 属性（必須入力） を併用することを強くおすすめします。

<!-- required をつけることで、未選択のまま送信できなくなる -->
<input type="radio" name="gender" value="male" required>

JavaScriptを使って動的に初期値や選択状態を変更する

ユーザーの操作や条件に応じて、後からラジオボタンの選択状態を変更したい場合はJavaScriptを使用します。

例えば「リセットボタンを押したら特定の項目に戻す」といった動作が可能です。

特定の項目を選択状態にするコード

<form id="myForm">
    <label><input type="radio" name="plan" value="basic" id="plan_basic"> 基本プラン</label>
    <label><input type="radio" name="plan" value="premium" id="plan_premium"> プレミアムプラン</label>
    
    <br><br>
    <button type="button" onclick="selectPremium()">プレミアムを選択</button>
</form>

<script>
    function selectPremium() {
        // IDを指定して要素を取得し、checkedプロパティをtrueにする
        const targetRadio = document.getElementById('plan_premium');
        targetRadio.checked = true;
        
        console.log('プレミアムプランが選択されました');
    }
</script>

JavaScript側で対象のラジオボタン要素（Element）を取得し、その checked プロパティに true を代入 することで、プログラムから選択状態にできます。

逆に選択を解除したい場合は false を代入しますが、ラジオボタンはグループ内で排他制御されるため、別の項目を true にすれば自動的に他は false（未選択）になります。

選択されている値を取得する方法

現在どのラジオボタンが選ばれているかを知りたい場合は、以下のように取得します。

// name属性が "plan" のラジオボタンリストを取得
const radios = document.getElementsByName('plan');
let selectedValue = '';

for (let i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
        selectedValue = radios[i].value;
        break;
    }
}

if (selectedValue === '') {
    console.log('未選択です');
} else {
    console.log('選択された値：' + selectedValue);
}