- checked属性を使用する方法: ラジオボタンを初期状態でチェックするには、input要素のchecked属性を使用します。以下は例です:
<input type="radio" name="option" value="option1" checked> オプション1
<input type="radio" name="option" value="option2"> オプション2
上記のコードでは、最初のラジオボタンがチェックされた状態で表示されます。
- JavaScriptを使用する方法: JavaScriptを使用して、ラジオボタンのチェック状態を動的に変更することもできます。以下は例です:
<input type="radio" name="option" value="option1" id="option1"> オプション1
<input type="radio" name="option" value="option2" id="option2"> オプション2
<script>
document.getElementById("option2").checked = true;
</script>
上記のコードでは、JavaScriptのgetElementById
メソッドを使用して、idが"option2"のラジオボタンをチェックしています。
- CSSを使用する方法: CSSを使用して、ラジオボタンの外観を変更することもできます。以下は例です:
<style>
input[type="radio"]:checked {
/* チェックされた状態のスタイルを指定 */
background-color: red;
}
</style>
<input type="radio" name="option" value="option1"> オプション1
<input type="radio" name="option" value="option2"> オプション2
上記のコードでは、ラジオボタンがチェックされた状態で背景色が赤くなるようにCSSを適用しています。
これらはHTMLのラジオボタンをチェックするためのいくつかの方法の一部です。必要に応じて、これらの方法を組み合わせて利用することもできます。