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

HTML DOM Input Radio（ラジオボタン）オブジェクトの使い方を徹底解説

HTML DOM の Input Radio オブジェクトは、type属性に「radio」が指定された <input> 要素に関連付けられています。ラジオボタンの入力要素は、新規作成する場合は createElement() メソッドを、既存の要素へアクセスする場合は getElementById() メソッドを使用することで操作できます。

Input Radio オブジェクトの主なプロパティ

Input Radio オブジェクトには、以下のようなプロパティが用意されています。

番号プロパティと説明
1autofocus
ページ読み込み時に、ラジオボタンへ自動的にフォーカスを当てるかどうかを設定または取得します。
2checked
ラジオボタンの選択状態（チェックの有無）を設定または取得します。
3defaultChecked
ラジオボタンの checked 属性のデフォルト値を返します。
4defaultValue
ラジオボタンのデフォルト値を設定または取得します。
5disabled
ラジオボタンを無効化（操作不可）にするかどうかを設定または取得します。
6form
ラジオボタンが含まれるフォームへの参照を返します。
7name
ラジオボタンの name 属性の値を設定または取得します。
8required
フォーム送信前にラジオボタンの選択を必須にするかどうかを設定または取得します。
9type
ラジオボタンのフォーム要素の種類（type）を返します。
10value
ラジオボタンの value 属性の値を設定または取得します。

構文

Input Radio オブジェクトを作成する構文は以下の通りです。

var R = document.createElement("INPUT");
R.setAttribute("type", "radio");

サンプルコード

それでは、Input Radio オブジェクトの具体的な使用例を見ていきましょう。

<!DOCTYPE html>
<html>
<head>
<script>
    function createRadio() {
        var R = document.createElement("INPUT");
        R.setAttribute("type", "radio");
        document.body.appendChild(R);
    }
</script>
</head>
<body>
<h1>Input radio object</h1>
<p>下のボタンをクリックすると、type="radio" の入力フィールドを作成します</p>
<button type="button" onclick="createRadio()">CREATE</button>
<br><br>
Mango:
</body>
</html>

実行結果

このコードを実行すると、次のような画面が表示されます。

HTML DOM Input Radio（ラジオボタン）オブジェクトの使い方を徹底解説

CREATE ボタンをクリックすると、ラジオボタンが動的に生成されます。

HTML DOM Input Radio（ラジオボタン）オブジェクトの使い方を徹底解説

コードの解説

上記の例では、まずユーザーがクリックすると createRadio() 関数を実行する CREATE ボタンを配置しています。

<button type="button" onclick="createRadio()">CREATE</button>

createRadio() 関数内では、document オブジェクトの createElement() メソッドに「INPUT」を引数として渡し、新しい <input> 要素を生成しています。生成された input 要素は変数 R に代入され、続いて setAttribute() メソッドを使って type 属性に「radio」を設定しています。

なお、setAttribute() メソッドは、指定した属性が存在しない場合に新しい属性を作成して値を代入するという働きもあります。最後に、document の body に対して appendChild() メソッドを呼び出すことで、type="radio" の input 要素を body の子要素として追加しています。

function createRadio() {
    var R = document.createElement("INPUT");
    R.setAttribute("type", "radio");
    document.body.appendChild(R);
}

このように、JavaScript を使えばラジオボタンを動的に作成・制御できるため、アンケートフォームや選択肢が状況によって変わる UI など、柔軟なWebページ構築に活用できます。

  1. HTML DOM ラジオボタンの required プロパティとは？構文と使い方を解説

    HTML DOM の input radio における required プロパティは、<input> 要素の required 属性に関連付けられたプロパティで、フォームをサーバーへ送信する前にラジオボタンの選択が必須かどうかを設定・取得するために使用されます。required 属性が付いたラジオボタンが未選択のままの場合、ユーザーがフォームを送信しようとしても送信は実行されません。 構文 required プロパティを設定する場合の構文は以下のとおりです。 radioObject.required = true|false true を指定するとフォーム送信前にラジオボタンの選

  2. HTML DOM Input RadioのdefaultCheckedプロパティとは？使い方をわかりやすく解説

    HTML DOMのInput Radio defaultCheckedプロパティは、ラジオボタンがデフォルト状態でチェックされているかどうかを確認するために使用されます。ラジオボタンのchecked属性がHTML内で設定されていればtrueを、設定されていなければfalseを返します。なお、defaultCheckedプロパティはHTMLソース上の初期状態（checked属性の有無）を判定する点に注意してください。ユーザーの操作による現在のチェック状態を取得したい場合は、checkedプロパティを使用します。構文Radio defaultCheckedプロパティの構文は以下のとおりです。rad