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

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

HTML DOM の Input Radio checked プロパティは、type 属性が「radio」に設定された <input> 要素の checked プロパティに関連付けられています。このプロパティを使用することで、ラジオボタンの checked 属性値を設定（選択状態にする）したり、現在の選択状態を取得したりすることができます。

構文

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

radioObject.checked = true|false
  • true を設定すると、ラジオボタンが選択された状態になります。
  • false を設定すると、ラジオボタンの選択が解除されます。

サンプルコード

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

<!DOCTYPE html>
<html>
<body>
<h1>Input Radio checked プロパティ</h1>
<form>
FRUIT:
<input type="radio" name="fruits" id="Mango">マンゴー
<input type="radio" name="fruits" id="Apple">りんご
</form>
<br><button type="button" onclick="checkApple()">りんごを選択</button>
<script>
    function checkApple() {
        document.getElementById("Apple").checked = true;
    }
</script>
</body>
</html>

実行結果

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

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

「りんごを選択」ボタンをクリックすると、次のようにりんごのラジオボタンが自動的に選択されます。

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

コードの解説

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

1. ラジオボタンの作成

フォーム内に、共通の属性 type="radio" と name="fruits" を持つ2つの入力フィールドを作成しています。同じ name 属性を持つラジオボタンは同一グループとして扱われ、どちらか一方しか選択できません。最初のラジオボタンには id「Mango」、2番目には id「Apple」が割り当てられています。

<form>
FRUIT:
<input type="radio" name="fruits" id="Mango">マンゴー
<input type="radio" name="fruits" id="Apple">りんご
</form>

2. ボタンの作成

次に、「りんごを選択」というボタンを作成しています。ユーザーがこのボタンをクリックすると、checkApple() 関数が実行される仕組みです。

<button type="button" onclick="checkApple()">りんごを選択</button>

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

checkApple() 関数は、getElementById() メソッドを使って type が radio の input 要素を取得し、その checked プロパティを true に設定します。これにより、りんごのラジオボタンが選択された状態になります。

function checkApple() {
    document.getElementById("Apple").checked = true;
}

まとめ

checked プロパティは、JavaScript からラジオボタンの選択状態を動的に制御できる便利な機能です。フォームの初期値設定や、ユーザーの操作に応じた選択肢の自動選択など、さまざまな場面で活用できます。なお、checked プロパティはブール値（true / false）を返すため、現在の選択状態を判定する条件分岐にも利用可能です。

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

    HTML DOMのInput Radio valueプロパティは、type=radioが指定されたinput要素のvalue属性に関連するプロパティです。ラジオボタンのvalue属性の値を取得（get）または設定（set）するために使用されます。ラジオボタンのvalueプロパティは、その値が画面上に表示されないため、Webサイトのユーザーインターフェースには直接影響しません。しかし、フォームを送信する際に、同じグループ内の複数のラジオボタンを区別するために非常に役立ちます。構文valueプロパティを設定する場合の構文は以下の通りです。radioObject.value = text;ここで、t

  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>