:checked を使いこなして Web ページを操作しよう！豊富なサンプルコード付き

select 要素内の option 要素が選択された状態
ラジオボタン (<input type="radio">) が選択された状態
チェックボックス (<input type="checkbox">) がオンの状態

:checked は、これらの要素に対してスタイルを適用したり、DOM 操作を実行したりする際に役立ちます。

:checked は、以下の様にセレクタの一部として記述します。

input[type="checkbox"]:checked {
  /* スタイル定義 */
}

input[type="radio"]:checked {
  /* スタイル定義 */
}

select option:checked {
  /* スタイル定義 */
}

上記のように、:checked は対象となる要素の種類 (input[type="checkbox"] など) を先に記述し、その後に :checked を続けることで使用します。

":checked" の実用的な例

例1：チェックされたチェックボックスの背景色を変更する

input[type="checkbox"]:checked {
  background-color: #00ff00; /* 緑色に変更 */
}

例2：選択されたラジオボタンの太字にする

input[type="radio"]:checked {
  font-weight: bold;
}

例3：選択されたオプション要素のフォントサイズを大きくする

select option:checked {
  font-size: 16px;
}

例4：:checked と隣接要素を操作する

:checked を ~ 擬似クラスと組み合わせることで、チェックされた要素に隣接する要素に対してスタイルを適用することができます。例えば、以下のコードは、チェックされたチェックボックスの横に配置されたラベルのフォント色を変更します。

input[type="checkbox"]:checked ~ label {
  color: blue;
}

この例のように、:checked は様々な用途で利用できます。

:checked を使用する場合は、対象となる要素の種類 (input[type="checkbox"] など) を正しく指定する必要があります。
:checked は、フォーム要素のみを対象としており、他の要素には適用できません。
:checked は、要素の状態を表す疑似クラスであり、属性ではありません。そのため、属性セレクタの [checked] とは区別する必要があります。

基本的な例

例1：チェックされたチェックボックスの背景色を変更する

input[type="checkbox"]:checked {
  background-color: #00ff00; /* 緑色に変更 */
}

例2：選択されたラジオボタンの太字にする

input[type="radio"]:checked {
  font-weight: bold;
}

例3：選択されたオプション要素のフォントサイズを大きくする

select option:checked {
  font-size: 16px;
}

例4：:checked と隣接要素を操作する

この例では、:checked を ~ 擬似クラスと組み合わせて、チェックされた要素に隣接する要素に対してスタイルを適用します。具体的には、チェックされたチェックボックスの横に配置されたラベルのフォント色を変更します。

input[type="checkbox"]:checked ~ label {
  color: blue;
}

例5：:checked を使って要素を非表示にする

:checked を使って、特定の条件を満たす要素を非表示にすることもできます。例えば、以下のコードは、チェックされていないチェックボックスを非表示にします。

input[type="checkbox"]:not(:checked) {
  display: none;
}

例6：:checked を使って要素を切り替える

:checked を使って、要素を切り替えることもできます。例えば、以下のコードは、チェックされたチェックボックスに応じて、異なる画像を表示します。

input[type="checkbox"]:checked ~ .image1 {
  display: block;
}

input[type="checkbox"]:not(:checked) ~ .image1 {
  display: none;
}

input[type="checkbox"]:checked ~ .image2 {
  display: none;
}

input[type="checkbox"]:not(:checked) ~ .image2 {
  display: block;
}

JavaScript を使用する

JavaScript を使用して、チェックボックスの状態を判定し、それに応じて処理を実行することができます。例えば、以下のようなコードで、チェックされたチェックボックスの個数をカウントすることができます。

const checkboxes = document.querySelectorAll('input[type="checkbox"]');
let checkedCount = 0;

for (const checkbox of checkboxes) {
  if (checkbox.checked) {
    checkedCount++;
  }
}

console.log('チェックされたチェックボックスの個数:', checkedCount);

この方法の利点は、":checked" では実現できない複雑な処理を実行できることです。一方、欠点としては、JavaScript の知識が必要となることと、パフォーマンスが低下する可能性があることが挙げられます。

属性セレクタを使用する

一部の属性セレクタを使用して、":checked" を補完することができます。例えば、以下のようなコードで、チェックされたチェックボックスにのみ data-checked 属性を設定することができます。

input[type="checkbox"]:checked {
  data-checked="true";
}

この方法の利点は、JavaScript を使用せずに、チェックされた要素を識別できることです。一方、欠点としては、すべてのブラウザでサポートされているわけではないことと、チェックボックス以外にも使用できないことが挙げられます。

ラベルと連動させる

ラベル (<label>) 要素とチェックボックス (<input type="checkbox">) 要素を組み合わせることで、":checked" を補完することができます。具体的には、以下の様に for 属性と id 属性を組み合わせることで、ラベルをクリックすることでチェックボックスを操作できるようにします。

<label for="checkbox1">チェックボックス 1</label>
<input type="checkbox" id="checkbox1">

<label for="checkbox2">チェックボックス 2</label>
<input type="checkbox" id="checkbox2">

この方法の利点は、ユーザーにとって直感的な操作性を実現できることです。一方、欠点としては、ラベルとチェックボックスを個別に記述する必要があることと、視覚的なデザインが制限される可能性があることが挙げられます。

CSS のカスタムプロパティを使用して、":checked" の機能を拡張することができます。例えば、以下のようなコードで、チェックされたチェックボックスの背景色を変更するカスタムプロパティを定義することができます。

:root {
  --checked-background-color: #00ff00;
}

input[type="checkbox"]:checked {
  background-color: var(--checked-background-color);
}

この方法の利点は、":checked" の動作を柔軟にカスタマイズできることです。一方、欠点としては、すべてのブラウザでサポートされているわけではないことと、複雑なコーディングが必要となる可能性があることが挙げられます。

":checked" は、チェックボックス、ラジオボタン、オプション要素の状態に応じてスタイルを適用したり、DOM 操作を実行したりする際に便利な疑似クラスです。しかし、状況によっては ":checked" の代替方法が必要となる場合があります。

:checked を使いこなして Web ページを操作しよう！ 豊富なサンプルコード付き