:checked と JavaScript/jQuery で実現する、インタラクティブなWebページ

CSSセレクターの ":checked"

使い方

:checked は、以下の形式で記述します。

要素名:checked {
  スタイル
}

例えば、以下のコードは、チェックされたチェックボックスに赤い背景色を適用します。

input[type="checkbox"]:checked {
  background-color: red;
}

注意点

:checked は、以下の点に注意する必要があります。

• チェックボックスやラジオボタン以外の要素には使用できません。
• フォーカスされた要素には適用されません。
• フォーム要素が初期化された後、:checked は無効になります。

応用例

:checked は、以下のような用途に使用できます。

• チェックされた項目を強調表示する
• チェックされた項目に基づいて、他の要素のスタイルを変える

その他の擬似クラス

:checked の他にも、以下のような擬似クラスがあります。

• :hover: マウスが要素の上に乗っているとき
• :focus: 要素がフォーカスされているとき
• :active: 要素がクリックされているとき
• :disabled: 要素が無効化されているとき

これらの擬似クラスを組み合わせることで、より複雑なスタイルを適用することができます。

:checked は、チェックされた入力要素にスタイルを適用する便利な擬似クラスです。このセレクターを理解することで、よりインタラクティブなWebページを作成することができます。

CSS セレクター ":checked" のサンプルコード

チェックされたチェックボックスを強調表示する

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

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

input[type="checkbox"]:checked {
  background-color: red;
}

チェックされた項目に基づいて、他の要素のスタイルを変える

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

<p id="text1">テキスト1</p>

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

<p id="text2">テキスト2</p>

#checkbox1:checked ~ #text1 {
  color: red;
}

#checkbox2:checked ~ #text2 {
  color: blue;
}

チェックされた項目の数を表示する

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

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

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

<span id="count"></span>

#count {
  display: block;
}

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

#count::after {
  content: "選択された項目数: " attr(data-count);
}

#checkbox1:checked ~ #count::after {
  content: "選択された項目数: 1";
}

#checkbox2:checked ~ #count::after {
  content: "選択された項目数: 2";
}

#checkbox3:checked ~ #count::after {
  content: "選択された項目数: 3";
}

チェックされたラジオボタンに基づいて、画像を切り替える

<input type="radio" id="radio1" name="image" value="image1">
<label for="radio1">画像1</label>

<input type="radio" id="radio2" name="image" value="image2">
<label for="radio2">画像2</label>

<img id="image" src="image1.jpg">

img {
  display: none;
}

#radio1:checked ~ #image {
  display: block;
  src: "image1.jpg";
}

#radio2:checked ~ #image {
  display: block;
  src: "image2.jpg";
}

チェックされた項目をリストに表示する

<input type="checkbox" id="checkbox1">
<label for="checkbox1">項目1</label>

<input type="checkbox" id="checkbox2">
<label for="checkbox2">項目2</label>

<input type="checkbox" id="checkbox3">
<label for="checkbox3">項目3</label>

<ul id="list"></ul>

#list {
  list-style: none;
}

input[type="checkbox"]:checked ~ #list {
  display: block;
}

#list::after {
  content: "";
  display: table;
  clear: both;
}

#list li {
  float: left;
  padding: 5px;
  border: 1px solid #ccc;
  margin: 5px;
}

:checked

CSS セレクター ":checked" 以外の方法

JavaScript を使って、チェックボックスやラジオボタンの状態を取得し、それに応じてスタイルを適用することができます。

例:

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

<script>
const checkbox = document.getElementById("checkbox");

checkbox.addEventListener("change", () => {
  if (checkbox.checked) {
    // チェックされた時の処理
    checkbox.style.backgroundColor = "red";
  } else {
    // チェックされていない時の処理
    checkbox.style.backgroundColor = "";
  }
});
</script>

jQuery を使って、チェックボックスやラジオボタンの状態を取得し、それに応じてスタイルを適用することができます。

例:

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

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$("#checkbox").change(() => {
  if ($("#checkbox").is(":checked")) {
    // チェックされた時の処理
    $("#checkbox").css("background-color", "red");
  } else {
    // チェックされていない時の処理
    $("#checkbox").css("background-color", "");
  }
});
</script>

CSS の :indeterminate 擬似クラスを使う方法

ラジオボタンの場合、indeterminate という擬似クラスを使って、半選択状態 (一部のラジオボタンが選択されている状態) を指定することができます。

例:

<input type="radio" name="radio" value="1">
<label for="radio1">ラジオボタン1</label>

<input type="radio" name="radio" value="2">
<label for="radio2">ラジオボタン2</label>

<input type="radio" name="radio" value="3">
<label for="radio3">ラジオボタン3</label>

input[type="radio"]:indeterminate {
  background-color: yellow;
}

:checked