JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでラジオボタンをデフォルトで選択状態にする方法

ラジオボタンをデフォルトで選択状態にするには、checkedプロパティをtrueに設定します。checkedがtrueに設定されると、そのボタンはページ表示時に自動的に選択された状態（オートフォーカス）になります。

まず、以下の例では3つのラジオボタンを配置していますが、いずれも初期状態では選択されていません。

コード例

<html>
    <form id="radiobuttons" name="radiobutton">
        <input id="rad1" value="a" type="radio" name="check"/>男性
        <input id="rad2" value="b" type="radio" name="check"/>女性
        <input id="rad3" value="c" type="radio" name="check"/>その他
    </form>
<body>
</body>
</html>

上記のコードを実行すると、次の画像のように、どのラジオボタンも選択されていない状態で表示されます。

出力結果

JavaScriptでラジオボタンをデフォルトで選択状態にする方法

これらのボタンのいずれかを初期選択状態にするには、JavaScriptで該当する要素のcheckedをあらかじめtrueに設定します。具体的には、次の例のように純粋なJavaScriptだけで実現できます。

コード例

<html>
    <form id="radiobuttons" name="radiobutton">
        <input id="rad1" value="a" type="radio" name="check"/>男性
        <input id="rad2" value="b" type="radio" name="check"/>女性
        <input id="rad3" value="c" type="radio" name="check"/>その他
    </form>
<body>
<script>
    const radiobtn = document.getElementById("rad1");
    radiobtn.checked = true;
</script>
</body>
</html>

このコードでは、document.getElementById()メソッドを使ってidが「rad1」のラジオボタン要素を取得し、そのcheckedプロパティにtrueを代入しています。その結果、「rad1」のラジオボタンがデフォルトで選択された状態になります。

上記のコードを実行すると、次のような出力が得られます。

出力結果

JavaScriptでラジオボタンをデフォルトで選択状態にする方法

補足：HTML属性で指定する方法

なお、JavaScriptを使わずに、HTMLのchecked属性を直接記述することでも同じ結果が得られます。動的な制御が必要ない場合は、こちらの方法がよりシンプルです。

<input id="rad1" value="a" type="radio" name="check" checked/>男性

状況に応じて、HTML属性による静的な指定と、JavaScriptによる動的な制御を使い分けるとよいでしょう。

  1. ボタンクリック時にJavaScriptでdivを非表示にする方法をわかりやすく解説

    Webページを作成していると、ボタンをクリックしたタイミングで特定の要素を表示・非表示に切り替えたい場面はよくあります。この記事では、JavaScriptのstyle.displayを使って、ボタンクリック時にdiv要素を非表示にする方法を具体的なコード例とともに解説します。基本となるdiv要素の準備まず、操作対象となる以下のようなdiv要素を用意します。<div id=showOrHide> Welcome in JavaScript </div>次に、クリックすると上記のdivが非表示になるボタンを配置します。onclick属性に関数名を指定するのがポイントです。&

  2. JavaScriptでボタンクリック時にli要素を削除する方法

    Webアプリケーションでは、リスト項目を動的に削除できるようにしたいケースはよくあります。この記事では、各要素（li）に配置した「削除」ボタンをクリックすることで、該当する要素をJavaScriptだけで削除する方法を解説します。 前提：対象となる順序なしリスト（ul） 例として、次のような順序なしリスト（ul）を想定します。 <ul> <li class="subjectName">JavaScript <button>Remove</button></li> <br> <