HTMLのラジオボタンのチェック方法


  1. checked属性を使用する方法: ラジオボタンを初期状態でチェックするには、input要素のchecked属性を使用します。以下は例です:
<input type="radio" name="option" value="option1" checked> オプション1
<input type="radio" name="option" value="option2"> オプション2

上記のコードでは、最初のラジオボタンがチェックされた状態で表示されます。

  1. 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"のラジオボタンをチェックしています。

  1. 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のラジオボタンをチェックするためのいくつかの方法の一部です。必要に応じて、これらの方法を組み合わせて利用することもできます。