JavaScript でチェックボックスをチェック/非チェックする方法

2024-04-19

JavaScript でチェックボックスをチェック/非チェックする方法

checked 属性を使用する

HTML の input 要素の checked 属性を使用して、チェックボックスの状態を設定できます。この属性に true を設定するとチェックボックスがオンになり、false を設定するとオフになります。

<input type="checkbox" id="myCheckbox" checked>

上記の例では、myCheckbox という ID のチェックボックスがデフォルトでオンになります。

JavaScript でこの属性を変更するには、次のように getElementById() メソッドと checked プロパティを使用します。

const checkbox = document.getElementById('myCheckbox');
checkbox.checked = true; // チェックボックスをオンにする
checkbox.checked = false; // チェックボックスをオフにする

setAttribute() メソッドを使用して、checked 属性を直接設定することもできます。

const checkbox = document.getElementById('myCheckbox');
checkbox.setAttribute('checked', 'true'); // チェックボックスをオンにする
checkbox.setAttribute('checked', 'false'); // チェックボックスをオフにする

addEventListener() メソッドを使用して、チェックボックスのクリックイベントをリスナーし、状態を変更することができます。

const checkbox = document.getElementById('myCheckbox');
checkbox.addEventListener('click', function() {
  checkbox.checked = !checkbox.checked;
});

上記のコードは、チェックボックスがクリックされるたびに状態が反転するようにします。

補足

上記の方法は、単一のチェックボックスを操作する場合に適しています。
複数のチェックボックスをまとめて操作したい場合は、querySelectorAll() や getElementsByClassName() などのメソッドを使用して、対象となるチェックボックスの配列を取得してから、ループ処理で個別に操作していくことができます。
チェックボックスの状態を保持するには、localStorage や sessionStorage などのストレージ機能を使用することができます。

JavaScript でチェックボックスをチェック/非チェックするサンプルコード

HTML コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>チェックボックス操作</title>
</head>
<body>
  <input type="checkbox" id="myCheckbox" checked>
  <button onclick="checkCheckbox()">チェック</button>
  <button onclick="uncheckCheckbox()">非チェック</button>
  <script src="script.js"></script>
</body>
</html>

JavaScript コード

function checkCheckbox() {
  const checkbox = document.getElementById('myCheckbox');
  checkbox.checked = true;
}

function uncheckCheckbox() {
  const checkbox = document.getElementById('myCheckbox');
  checkbox.checked = false;
}

説明

HTML コード:
- input type="checkbox" id="myCheckbox" checked は、myCheckbox という ID のチェックボックスを作成し、デフォルトでオンの状態にします。
JavaScript コード:
- checkCheckbox() 関数は、document.getElementById('myCheckbox') を使用して myCheckbox チェックボックスを取得し、checkbox.checked = true; でオン状態に設定します。
- uncheckCheckbox() 関数は、同様に myCheckbox チェックボックスを取得し、checkbox.checked = false; でオフ状態に設定します。

このサンプルコードでは、ボタンをクリックすることでチェックボックスの状態を切り替えています。もちろん、このコードを参考に、ご自身のニーズに合わせて自由に改造することができます。

JavaScript でチェックボックスをチェック/非チェックするその他の方法

querySelector() メソッドを使用して、CSS セレクターを使ってチェックボックスを個別に選択し、状態を変更することができます。

const checkbox = document.querySelector('#myCheckbox');
checkbox.checked = true; // チェックボックスをオンにする
checkbox.checked = false; // チェックボックスをオフにする

getElementsByTagName() メソッドを使用して、ページ内のすべてのチェックボックスを取得し、ループ処理で個別に状態を変更することができます。

const checkboxes = document.getElementsByTagName('input');
for (let checkbox of checkboxes) {
  if (checkbox.type === 'checkbox') {
    checkbox.checked = true; // すべてのチェックボックスをオンにする
    // または
    if (checkbox.id === 'myCheckbox') {
      checkbox.checked = true; // 特定の ID のチェックボックスのみオンにする
    }
  }
}

jQuery ライブラリを使用すると、JavaScript で DOM 操作をより簡単に記述することができます。

$(document).ready(function() {
  $('#myCheckbox').prop('checked', true); // チェックボックスをオンにする
  $('#myCheckbox').prop('checked', false); // チェックボックスをオフにする
});

カスタムラベルを使用する

HTML の <label> 要素と for 属性を使用して、チェックボックスにカスタムラベルを関連付けることができます。ラベルをクリックすると、対応するチェックボックスの状態が自動的に切り替わります。

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

ARIA 属性を使用する

アクセシビリティを向上させるために、ARIA 属性を使用してチェックボックスの状態をプログラム的に制御することができます。

<input type="checkbox" id="myCheckbox" aria-checked="true">

上記以外にも、さまざまな方法で JavaScript でチェックボックスをチェック/非チェックすることができます。最適な方法は、状況や要件によって異なります。

javascript checkbox

JavaScript でチェックボックスをチェック/非チェックする方法