HTML DOM Input Radio オブジェクト：完全ガイド
説明: HTML DOM の Input Radio オブジェクトについて、その属性、メソッド、および実際のアプリケーションケースを含めて詳しく解説し、単一選択ボタンの操作テクニックを簡単に習得できるようにします。
一、Input Radio オブジェクトとは？
- Input Radio オブジェクトは、HTML フォーム内の単一選択ボタンを表します。
- ユーザーは、事前に定義された複数のオプションの中から唯一の項目を選択できます。
二、Input Radio オブジェクトの属性
- 継承属性: Input Radio オブジェクトは、すべての Input オブジェクトの標準属性を継承します。
- checked 属性:
- ブール値で、単一選択ボタンが選択されているかどうかを示します。
- 読み書き可能です。
- defaultChecked 属性:
- ブール値で、ページの読み込み時に単一選択ボタンがデフォルトで選択されているかどうかを示します。
- 読み取り専用です。
- value 属性:
- 文字列で、フォームの送信時にサーバーに送信される値を定義します。
三、Input Radio オブジェクトのメソッド
- 継承メソッド: Input Radio オブジェクトは、すべての Input オブジェクトの標準メソッドを継承します。
四、実際のアプリケーションケース
1. 選択された単一選択ボタンの値を取得する:
<form>
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female" checked> 女性
</form>
<script>
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
event.preventDefault(); // フォームのデフォルト送信を阻止する
const selectedGender = document.querySelector('input[name="gender"]:checked').value;
console.log("選択された性別は:", selectedGender);
});
</script>
2. 単一選択ボタンの選択状態を動的に設定する:
<input type="radio" name="option" value="A"> オプション A
<input type="radio" name="option" value="B"> オプション B
<button onclick="selectOption('B')">オプション B を選択</button>
<script>
function selectOption(value) {
const radios = document.querySelectorAll('input[name="option"]');
radios.forEach(radio => {
if (radio.value === value) {
radio.checked = true;
}
});
}
</script>
五、まとめ
HTML DOM Input Radio オブジェクトは、開発者に単一選択ボタンを柔軟に操作する方法を提供します。この記事の説明を通して、より深く理解していただけたと思います。
よくある質問
Q1: Input Radio オブジェクトを使用して、複数のオプションを選択することはできますか？
A1: いいえ、Input Radio オブジェクトは、一度に 1 つのオプションのみを選択するように設計されています。複数のオプションを選択できるようにするには、代わりに Input Checkbox オブジェクトを使用する必要があります。
Q2: Input Radio オブジェクトの選択状態を JavaScript で変更するにはどうすればよいですか？
A2: checked 属性を true または false に設定することで、Input Radio オブジェクトの選択状態を変更できます。たとえば、radioButton.checked = true; は、radioButton 変数で参照される Input Radio オブジェクトを選択します。
Q3: Input Radio オブジェクトを使用して、フォームを送信せずに選択された値を取得するにはどうすればよいですか？
A3: JavaScript を使用して、選択された Input Radio オブジェクトの value 属性を取得できます。たとえば、document.querySelector('input[name="gender"]:checked').value は、"gender" という名前の Input Radio グループで選択された値を返します。