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

HTML DOM Input radio typeプロパティの使い方を徹底解説

HTML DOMのInput radio typeプロパティは、type="radio"が設定されたinput要素（ラジオボタン）に関連付けられたプロパティです。このプロパティは、ラジオボタン型のinput要素に対して常に文字列「radio」を返します。要素の種類をプログラムから確認したい場合に便利です。

構文

radio typeプロパティの基本構文は以下のとおりです。

radioObject.type

サンプルコード

ここで、radio typeプロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input radio type Property</h1>
<form>
FRUIT:
<input type="radio" name="fruits" id="Mango">Mango
<br>
</form>
<p>下のボタンをクリックすると、上記input要素のtypeを取得できます</p>
<button type="button" onclick="radioType()">GET Type</button>
<p id="Sample"></p>
<script>
   function radioType() {
      var P=document.getElementById("Mango").type;
      document.getElementById("Sample").innerHTML = "inputフィールドのtypeは: "+P ;
   }
</script>
</body>
</html>

出力結果

上記のコードを実行すると、以下のように表示されます。

HTML DOM Input radio typeプロパティの使い方を徹底解説

「GET Type」ボタンをクリックすると、次のようになります。

HTML DOM Input radio typeプロパティの使い方を徹底解説

コードの解説

まず、form要素の中にtype="radio"、name="fruits"、id="Mango"を指定したinput要素を作成しています。

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

次に、ユーザーがクリックするとradioType()関数を実行する「GET Type」ボタンを配置しています。

<button type="button" onclick="radioType()">GET Type</button>

radioType()関数では、getElementById()メソッドを使ってid「Mango」のinput要素を取得し、そのtype属性の値を変数Pに代入します。そして、innerHTMLプロパティを利用して、id「Sample」の段落に取得した値を表示しています。

function radioType() {
   var P = document.getElementById("Mango").type;
   document.getElementById("Sample").innerHTML = "inputフィールドのtypeは : "+P;
}

このように、typeプロパティを参照するだけで、対象のinput要素がラジオボタンであることを簡単に判定できます。フォームのバリデーションや動的な処理を行う際に活用してみてください。

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

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

  2. HTML DOM Input radio typeプロパティの使い方を徹底解説

    HTML DOMのInput radio typeプロパティは、type=radioが設定されたinput要素（ラジオボタン）に関連付けられたプロパティです。このプロパティは、ラジオボタン型のinput要素に対して常に文字列「radio」を返します。要素の種類をプログラムから確認したい場合に便利です。構文radio typeプロパティの基本構文は以下のとおりです。radioObject.typeサンプルコードここで、radio typeプロパティの具体的な使用例を見てみましょう。<!DOCTYPE html> <html> <body> <h1>