Checked属性の属性値は？

checked属性の属性値は？

チェックボックスやラジオボタンは、ウェブフォームでユーザーに選択肢を提供する際によく利用される要素です。これらの要素の状態（選択されているかどうか）を制御するのが、HTMLの`checked`属性です。この記事では、`checked`属性の仕組み、属性値の扱い、そして実際の利用例について詳しく解説します。

checked属性の役割

`checked`属性は、主に以下のHTML要素で使用されます。

* ``: チェックボックス * ``: ラジオボタン

`checked`属性が設定されている場合、該当するチェックボックスまたはラジオボタンは、ページの読み込み時に**初期状態で選択された状態**になります。

属性値の扱い：ブール属性

`checked`属性は、HTMLにおいて「**ブール属性**」に分類されます。ブール属性とは、属性値が「真（true）」または「偽（false）」の二値で表現される属性のことです。`checked`属性の場合、属性が存在する場合は「真」、存在しない場合は「偽」と解釈されます。

HTMLでは、ブール属性の記述方法に以下の2つのパターンが認められています。

1. **属性値を省略する:** `checked` 2. **属性値に属性名と同じ値を指定する:** `checked="checked"`

どちらの記述方法でも動作は同じですが、XHTMLでは後者の`checked="checked"`のように属性値を省略せずに記述する必要があります。HTML5以降では、前者の簡略表記が推奨されています。

記述方法	説明	推奨環境
`checked`	属性値を省略する簡略表記	HTML5以降
`checked="checked"`	属性値を明示的に指定する	XHTML

HTMLでの記述例

以下に、`checked`属性を使用したチェックボックスとラジオボタンの記述例を示します。

<!-- チェックボックスの例 -->
<label>
  <input type="checkbox" name="hobby" value="reading" checked> 読書
</label>
<label>
  <input type="checkbox" name="hobby" value="music"> 音楽鑑賞
</label>

<!-- ラジオボタンの例 -->
<label>
  <input type="radio" name="gender" value="male" checked> 男性
</label>
<label>
  <input type="radio" name="gender" value="female"> 女性
</label>

上記の例では、"読書"のチェックボックスと"男性"のラジオボタンに`checked`属性が設定されているため、ページ読み込み時にこれらの選択肢が初期状態で選択されます。

JavaScriptとの連携

JavaScriptを使用すると、`checked`属性の状態を取得したり、動的に変更したりすることができます。`checked`プロパティにアクセスすることで、チェックボックスやラジオボタンが選択されているかどうかを判定できます。

```javascript // チェックボックスの状態を取得 const isChecked = document.querySelector('input[name="hobby"][value="reading"]').checked; // ラジオボタンの状態を変更 document.querySelector('input[name="gender"][value="female"]').checked = true; ```

まとめ

`checked`属性は、チェックボックスとラジオボタンの初期状態を選択状態にするための重要な属性です。ブール属性であるため、属性値を省略するか、属性名と同じ値を指定することで、要素が選択された状態になります。HTMLとJavaScriptを組み合わせることで、ユーザーインターフェースの設計に柔軟性を持たせることができます。

checked属性の属性値は？

checked属性の役割

属性値の扱い：ブール属性

HTMLでの記述例

JavaScriptとの連携

まとめ

関連QA

Q1: checked属性は、どのような場合に使用するべきですか？

Q2: checked属性を複数のチェックボックスに設定できますか？

Q3: JavaScriptでchecked属性を変更しても、フォームの送信結果に反映されますか？