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

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

HTML DOMのInput Radio defaultCheckedプロパティは、ラジオボタンがデフォルト状態でチェックされているかどうかを確認するために使用されます。ラジオボタンのchecked属性がHTML内で設定されていればtrueを、設定されていなければfalseを返します。

なお、defaultCheckedプロパティはHTMLソース上の初期状態（checked属性の有無）を判定する点に注意してください。ユーザーの操作による現在のチェック状態を取得したい場合は、checkedプロパティを使用します。

構文

Radio defaultCheckedプロパティの構文は以下のとおりです。

radioObject.defaultChecked

サンプルコード

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

<!DOCTYPE html>
<html>
<body>
<h1>Input Radio defaultChecked property</h1>
<form>
FRUIT:
<input type="radio" name="fruits" id="Mango" checked>Mango
</form>
<br> <button type=”button” onclick="checkDefault()">CHECK</button>
<p id="Sample"></p>
<script>
   function checkDefault() {
      var c = document.getElementById("Mango").checked;
      document.getElementById("Sample").innerHTML = "The button default checked value is "+c;
   }
</script>
</body>
</html>

出力結果

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

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

CHECKボタンをクリックすると、以下のように結果が表示されます。

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

コードの解説

上記のサンプルでは、以下のような処理が行われています。

1. ラジオボタンの作成

まず、フォーム内にtype="radio"、name="fruits"、id="Mango"を持つinput要素を作成し、checked属性を設定することでデフォルトでチェックされた状態にしています。

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

2. CHECKボタンの作成

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

<button type=”button” onclick="checkDefault()">CHECK</button>

3. checkDefault()関数の処理内容

checkDefault()関数では、getElementById()メソッドを使って対象のラジオボタン要素を取得します。このラジオボタンにはchecked属性が設定されているためtrueが返り、その値が変数cに代入されます。最後に、innerHTMLプロパティを使用して、id「Sample」の段落に結果の値を表示しています。

function checkDefault() {
   var c = document.getElementById("Mango").checked;
   document.getElementById("Sample").innerHTML = "The button default checked value is "+c;
}

まとめ

defaultCheckedプロパティを活用すれば、JavaScriptからラジオボタンの初期チェック状態を簡単に確認できます。フォームの状態管理やデバッグの際に役立つので、ぜひ覚えておきましょう。

  1. 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>

  2. HTML DOM Input リセットボタンの disabled プロパティの使い方を解説

    HTML DOM の Input Reset オブジェクトが持つ disabled プロパティは、フォーム内のリセットボタンを無効化するかどうかを設定したり、現在の状態を取得したりするために使用されます。このプロパティはブール値（true / false）を受け取り、true を設定するとリセットボタンが無効になり、false であれば有効な状態を保ちます。デフォルト値は false です。disabled プロパティが true に設定された要素は、グレーアウトして表示され、クリックすることもできなくなります。つまり、ユーザーはそのボタンと一切やり取りできなくなります。構文disabled