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

HTML DOM ラジオボタンのvalueプロパティとは？取得・設定方法を解説

HTML DOMのInput Radio valueプロパティは、type="radio"が指定されたinput要素のvalue属性に関連するプロパティです。ラジオボタンのvalue属性の値を取得（get）または設定（set）するために使用されます。

ラジオボタンのvalueプロパティは、その値が画面上に表示されないため、Webサイトのユーザーインターフェースには直接影響しません。しかし、フォームを送信する際に、同じグループ内の複数のラジオボタンを区別するために非常に役立ちます。

構文

valueプロパティを設定する場合の構文は以下の通りです。

radioObject.value = text;

ここで、textにはラジオボタンに設定したい値を指定します。

サンプルコード

Input Radio valueプロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input radio Value property</h1>
<form>
FRUIT:
<input type="radio" name="fruits" id="BTN1" value="Mango">Mango
<br>
</form>
<p>下のボタンをクリックして要素の値を取得してください</p>
<button type="button" onclick="getValue()">Get Value</button>
<p id="Sample"></p>
<script>
function getValue() {
  var t = document.getElementById("BTN1").value;
  document.getElementById("Sample").innerHTML = "ラジオボタンの値は : "+t;
}
</script>
</body>
</html>

実行結果

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

HTML DOM ラジオボタンのvalueプロパティとは？取得・設定方法を解説

「Get Value」ボタンをクリックすると、次のようにラジオボタンの値が表示されます。

HTML DOM ラジオボタンのvalueプロパティとは？取得・設定方法を解説

コードの解説

上記の例では、以下のような処理を行っています。

1. ラジオボタンの作成

まず、フォーム内にtype="radio"、name="fruits"、id="BTN1"、value="Mango"を指定したinput要素を作成しています。

<form>
FRUIT:
<input type="radio" name="fruits" id="BTN1" value="Mango">Mango
</form>

2. ボタンの作成

次に、ユーザーがクリックするとgetValue()メソッドを実行する「Get Value」ボタンを作成しています。

<button type="button" onclick="getValue()">Get Value</button>

3. 値の取得と表示

getValue()メソッドでは、getElementById()メソッドを使ってinput要素を取得し、そのvalue属性の値を変数tに代入しています。もしラジオボタンにvalue属性が指定されていない場合は、空の文字列が返される点に注意してください。取得した値は、innerHTMLプロパティを使ってidが「Sample」の段落に表示されます。

function getValue() {
  var t = document.getElementById("BTN1").value;
  document.getElementById("Sample").innerHTML = "ラジオボタンの値は : "+t;
}
  1. HTML DOM Input Radioのformプロパティとは？使い方とサンプルコードを解説

    HTML DOMのInput Radioオブジェクトにおけるformプロパティは、指定されたラジオボタンが属するフォーム（form要素）への参照を返すために使用されます。もしラジオボタンがどのフォームにも含まれていない場合は、NULLを返します。このプロパティは読み取り専用です。 構文 Input Radioのformプロパティの構文は以下のとおりです。 radioObject.form 使用例 ここで、Input Radioのformプロパティを使った具体的な例を見てみましょう。 <!DOCTYPE html> <html> <body> <h1&g

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

    disabledプロパティとはHTML DOMのInput Radio disabledプロパティは、ラジオボタンを無効化するかどうかを設定、または現在の状態を取得するために使用されるプロパティです。ブール値（true / false）で状態を表し、trueなら要素を無効化、falseなら有効のままとなります。デフォルト値はfalseです。disabledが設定された要素はグレーアウトして表示され、ユーザーがクリックして選択することはできません。構文disabledプロパティを設定する場合の構文は以下の通りです。radioObject.disabled = true|false;trueを指定