JavaScriptでチェックボックスを活用しよう！カスタマイズ方法や使い方を10選で紹介

はじめに
●JavaScriptでチェックボックスを作る基本
- ○HTMLとチェックボックス
- ○JavaScriptでチェックボックスを操作する基本
●使い方とサンプルコード
●応用例とサンプルコード
●JavaScriptの活用における注意点とその解決策
- ○ブラウザ間の互換性の問題
- ○チェックボックスの誤操作に対する対応
まとめ

はじめに

この記事を読めば、JavaScriptでチェックボックスを活用したプロジェクトを手軽に作成できるようになります。

初心者の方でもわかりやすいように、基本的な作り方や使い方、注意点、カスタマイズ方法まで徹底解説していきます。

JavaScriptでチェックボックスを使った10の方法を紹介しているので、ぜひ参考にしてみてください。

●JavaScriptでチェックボックスを作る基本

チェックボックスは、HTMLとJavaScriptを組み合わせて作成されるものです。

まずはHTMLとチェックボックスについての基本を学び、その後JavaScriptでチェックボックスを操作する方法を紹介します。

○HTMLとチェックボックス

HTMLでは、<input>タグのtype属性にcheckboxを指定することで、チェックボックスを作成できます。

例えば、下記のように記述することでチェックボックスが表示されます。

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

○JavaScriptでチェックボックスを操作する基本

JavaScriptでは、getElementByIdやquerySelectorなどのメソッドを使ってHTMLのチェックボックス要素を取得し、チェックボックスの状態や値を操作することができます。

例えば、下記のように記述することでチェックボックスの状態を取得できます。

const checkbox = document.getElementById('exampleCheckbox');
const isChecked = checkbox.checked;
console.log(isChecked); // true or false

●使い方とサンプルコード

ここでは、JavaScriptでチェックボックスを活用するいくつかの方法をサンプルコードとともに紹介します。

○サンプルコード1：チェックボックスの状態を取得

このサンプルコードでは、チェックボックスがチェックされているかどうかを判定しています。

checkbox.checkedプロパティでチェックされている場合はtrue、そうでない場合はfalseを取得できます。

const checkbox = document.getElementById('exampleCheckbox');
const isChecked = checkbox.checked;
console.log(isChecked); // true or false

○サンプルコード2：チェックボックスを全選択・全解除

複数のチェックボックスがある場合、一括で全てのチェックボックスを選択するか解除する機能を実装できます。

下記のサンプルコードでは、selectAll関数で全てのチェックボックスを選択し、deselectAll関数で全てのチェックボックスを解除します。

<input type="checkbox" class="checkbox" />
<input type="checkbox" class="checkbox" />
<input type="checkbox" class="checkbox" />
<button onclick="selectAll()">全選択</button>
<button onclick="deselectAll()">全解除</button>

<script>
function selectAll() {
  const checkboxes = document.querySelectorAll('.checkbox');
  checkboxes.forEach((checkbox) => {
    checkbox.checked = true;
  });
}

function deselectAll() {
  const checkboxes = document.querySelectorAll('.checkbox');
  checkboxes.forEach((checkbox) => {
    checkbox.checked = false;
  });
}
</script>

○サンプルコード3：チェックボックスで条件を絞り込む

チェックボックスを使って、表示する要素の条件を絞り込むことができます。

下記のサンプルコードでは、チェックボックスの状態に応じてリストの表示を切り替えています。

<input type="checkbox" id="filterCheckbox" onchange="filterList()" />
<label for="filterCheckbox">条件を絞り込む</label>
<ul id="list">
  <li class="item">アイテム1</li>
  <li class="item">アイテム2</li>
  <li class="item item-hidden">アイテム3（非表示）</li>
</ul>

<script>
function filterList() {
  const checkbox = document.getElementById('filterCheckbox');
  const isChecked = checkbox.checked;
  const hiddenItems = document.querySelectorAll('.item-hidden');

  hiddenItems.forEach((item) => {
    item.style.display = isChecked ? 'none' : 'block';
  });
}
</script>

○サンプルコード4：チェックボックスで表示内容を切り替え

チェックボックスの状態に応じて、表示する内容を切り替えることができます。

下記のサンプルコードでは、チェックボックスがチェックされているかどうかでメッセージを切り替えています。

<input type="checkbox" id="switchCheckbox" onchange="switchMessage()" />
<label for="switchCheckbox">メッセージを切り替える</label>
<p id="message">メッセージ1</p>

<script>
function switchMessage() {
  const checkbox = document.getElementById('switchCheckbox');
  const isChecked = checkbox.checked;
  const message = document.getElementById('message');
  
  message.textContent = isChecked ? 'メッセージ2' : 'メッセージ1';
}
</script>

●応用例とサンプルコード

チェックボックスは、単純な選択機能だけでなく、さまざまな応用が可能です。

ここでは、いくつかの応用例とそのサンプルコードを紹介します。

○サンプルコード5：チェックボックスでToDoリストを作成

チェックボックスを使って簡単なToDoリストを作成できます。

下記のサンプルコードでは、チェックボックスがチェックされたら、そのアイテムに取り消し線を表示します。

<ul>
  <li><input type="checkbox" onchange="toggleStrike(this)" /><label>タスク1</label></li>
  <li><input type="checkbox" onchange="toggleStrike(this)" /><label>タスク2</label></li>
  <li><input type="checkbox" onchange="toggleStrike(this)" /><label>タスク3</label></li>
</ul>

<script>
function toggleStrike(checkbox) {
  const label = checkbox.nextElementSibling;
  label.style.textDecoration = checkbox.checked ? 'line-through' : 'none';
}
</script>

○サンプルコード6：チェックボックスでフォームの入力項目を切り替え

チェックボックスを使って、フォームの入力項目を表示・非表示に切り替えることができます。

下記のサンプルコードでは、チェックボックスがチェックされた場合、追加の入力項目が表示されます。

<form>
  <input type="checkbox" id="additionalInfoCheckbox" onchange="toggleAdditionalInfo()" />
  <label for="additionalInfoCheckbox">追加情報を入力する</label>
  <div id="additionalInfo" style="display:none;">
    <label for="info">追加情報：</label>
    <input type="text" id="info" />
  </div>
</form>

<script>
function toggleAdditionalInfo() {
  const checkbox = document.getElementById('additionalInfoCheckbox');
  const additionalInfo = document.getElementById('additionalInfo');
  additionalInfo.style.display = checkbox.checked ? 'block' : 'none';
}
</script>

○サンプルコード7：チェックボックスで画像を表示・非表示に切り替え

チェックボックスを使って、画像の表示・非表示を切り替えることができます。

下記のサンプルコードでは、チェックボックスがチェックされた場合、画像が表示されます。

<input type="checkbox" id="toggleImageCheckbox" onchange="toggleImage()" />
<label for="toggleImageCheckbox">画像を表示/非表示にする</label>
<img id="image" src="example.jpg" style="display:none;" />

<script>
function toggleImage() {
  const checkbox = document.getElementById('toggleImageCheckbox');
  const image = document.getElementById('image');
  image.style.display = checkbox.checked ? 'block' : 'none';
}
</script>

このサンプルコードでは、チェックボックスにonchangeイベントを設定し、toggleImage()関数を呼び出します。

toggleImage()関数内では、チェックボックスの状態を取得し、チェックされていれば画像を表示（display: block）、チェックされていなければ非表示（display: none）に設定しています。

画像の表示・非表示を切り替えるために、style.displayプロパティを使用しています。

○サンプルコード8：チェックボックスで画像を選択

チェックボックスを使って、複数の画像から選択した画像を表示することができます。

下記のサンプルコードでは、チェックボックスがチェックされた画像が表示エリアに表示されます。

<label><input type="checkbox" onchange="selectImage(this, 'image1.jpg')" />画像1</label>
<label><input type="checkbox" onchange="selectImage(this, 'image2.jpg')" />画像2</label>
<label><input type="checkbox" onchange="selectImage(this, 'image3.jpg')" />画像3</label>

<div id="selectedImages"></div>

<script>
function selectImage(checkbox, imageUrl) {
  const selectedImages = document.getElementById('selectedImages');
  if (checkbox.checked) {
    const img = document.createElement('img');
    img.src = imageUrl;
    img.classList.add('selected-image');
    selectedImages.appendChild(img);
  } else {
    const images = selectedImages.querySelectorAll('.selected-image');
    for (let i = 0; i < images.length; i++) {
      if (images[i].src.endsWith(imageUrl)) {
        selectedImages.removeChild(images[i]);
        break;
      }
    }
  }
}
</script>

このサンプルコードでは、チェックボックスがチェックされたらselectImage()関数が呼び出されます。

selectImage()関数では、チェックされた画像のURLを引数として受け取り、新たなimg要素を生成して、selectedImagesのdiv要素に追加します。

チェックが解除された場合、selectedImagesから該当の画像要素を削除します。

○サンプルコード9：CSSでチェックボックスのデザインを変更

下記のサンプルコードでは、CSSを使ってチェックボックスのデザインをカスタマイズしています。

<style>
.custom-checkbox {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #f0f0f0;
  border: 2px solid #333;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
}

.custom-checkbox input[type="checkbox"] {
  display: none;
}

.custom-checkbox::before {
  content: "";
  display: block;
  position: absolute;
  width: 6px;
  height: 12px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: rotate(45deg);
  top: 3px;
  left: 7px;
  opacity: 0;
}

.custom-checkbox input[type="checkbox"]:checked + .custom-checkbox::before {
  opacity: 1;
}
</style>

<label class="custom-checkbox">
  <input type="checkbox" />
  <span class="custom-checkbox"></span>
</label>

このサンプルコードでは、.custom-checkboxクラスを追加し、CSSを用いてチェックボックスのデザインを変更しています。

チェックボックスが選択されたとき、::before疑似要素を使ってチェックマークが表示されるように設定しています。

○サンプルコード10：チェックボックスの状態に応じて動的にスタイルを変更

チェックボックスの状態に応じて、動的にスタイルを変更することができます。

下記のサンプルコードでは、チェックボックスがチェックされた場合、テキストの色が変わります。

<input type="checkbox" id="textColorToggle" onchange="toggleTextColor()" />
<label for="textColorToggle">テキストの色を変更</label>
<p id="targetText">このテキストの色が変わります。</p>

<script>
function toggleTextColor() {
  const textColorToggle = document.getElementById('textColorToggle');
  const targetText = document.getElementById('targetText');
  targetText.style.color = textColorToggle.checked ? 'red' : 'black';
}
</script>