JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでチェックボックスのオン/オフを切り替える方法【サンプルコード付き】

Webフォームや設定画面などでは、「ボタンをクリックするとチェックボックスの状態が反転する」という動作を実装したいケースがあります。本記事では、JavaScriptを使ってチェックボックスのオン/オフを簡単に切り替える方法を、実際に動くサンプルコードとともに解説します。

実装のポイント

チェックボックスのオン/オフ状態は、DOM要素の checked プロパティで管理されています。この値が true ならチェック済み、false なら未チェックです。ボタンのクリックイベント内でこの値を読み取って反転させれば、トグル動作はわずか数行のコードで実現できます。

コード例

以下は、JavaScriptを使用してチェックボックスのオン/オフを切り替える完全なサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
</style>
</head>
<body>
<h1>Check/uncheck boxes using JavaScript</h1>
<input class="check" type="checkbox" />
<button class="Btn">Toggle</button>
<script>
    let BtnEle = document.querySelector(".Btn");
    let checkEle = document.querySelector(".check");
    BtnEle.addEventListener("click", () => {
        if (checkEle.checked === true) checkEle.checked = false;
        else checkEle.checked = true;
    });
</script>
</body>
</html>

コードの解説

このコードの処理の流れは以下の通りです。

  • 要素の取得： document.querySelector() を使って、ボタン（.Btn）とチェックボックス（.check）の要素をそれぞれ取得します。
  • イベント登録： addEventListener("click", ...) により、ボタンがクリックされたときに実行される関数を登録します。
  • 状態の反転： クリック時に checked プロパティが true なら false に、false なら true に代入し直すことで、チェック状態を切り替えています。

なお、if文による分岐を使わず、checkEle.checked = !checkEle.checked; のように論理否定演算子を使えば、さらに簡潔に書くこともできます。

実行結果

初期状態では、チェックボックスは未チェックのまま表示されます。

JavaScriptでチェックボックスのオン/オフを切り替える方法【サンプルコード付き】

「Toggle」ボタンをクリックするたびに、チェックボックスのオン/オフが交互に切り替わります。

JavaScriptでチェックボックスのオン/オフを切り替える方法【サンプルコード付き】

まとめ

チェックボックスの切り替えは、checked プロパティの値を操作するだけで簡単に実装できます。「すべて選択」「すべて解除」の一括操作機能などにも応用できる基本的なテクニックなので、ぜひ覚えておきましょう。

  1. 【C言語】再帰を使って配列が回文かどうかを判定するプログラム

    配列 arr[n](n は配列のサイズ)が与えられたとき、再帰を用いてその配列が回文かどうかを判定するのが本記事のテーマです。回文とは、前から読んでも後ろから読んでも同じになる並びのことで、「MADAM」や「NAMAN」などが代表的な例です。配列が回文かどうかを調べるには、先頭と末尾から順に要素を比較していきます。再帰的なアプローチでも同様に、start と end の値を更新しながら比較を続けます。start と end が交差(すれ違う)すれば回文と判定でき、途中で要素が一致しなかった場合はそこで処理を打ち切り、false を返します。入力例と出力例入力: arr[] = { 2, 3,

  2. C++のSTLを使って配列が回文かどうかを判定するプログラム

    整数 n 個からなる配列 arr[n] が与えられたとき、「その配列は回文（パリンドローム）か？」を判定するのが本稿のテーマです。C++ の STL（標準テンプレートライブラリ）を活用して、この問題をシンプルに解いていきます。 STLとは STL（Standard Template Library）は、C++ に用意されたテンプレートクラスの集合体で、スタック・キュー・リストといったデータ構造や、ソート・反転などの便利な関数を提供します。これらを活用するには、テンプレートクラスに関する基本的な知識が必要です。本稿では、STL の reverse() 関数を使って配列を反転させています。 回文と