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

【jQuery】ボタン1回のクリックでチェックボックスを全選択・全解除する方法

Webフォームでは、複数のチェックボックスを一括で選択・解除したいケースがよくあります。本記事では、jQueryのidセレクタを使い、ボタンをクリックするだけで全チェックボックスの選択状態を切り替える方法を解説します。

実装のポイント

ポイントは、jQuery("セレクタ")に対象要素のidを指定することです。ボタンがクリックされるたびにtoggleClass()でCSSクラスを付け外しし、その状態に応じてprop()でチェックボックスのON／OFFを切り替えます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
<style>
   .changeColor {
      color: red
   };
</style>
</head>
<body>
<input type="button" id="selectDemo" value="Want To Select All Values" />
<table>
<tr>
<td>
<input type="checkbox" id="CheckBoxId1" class="isSelected" /> Javascript
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="CheckBoxId2" class="isSelected" /> MySQL
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="CheckBoxId3" class="isSelected" /> MongoDB
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="CheckBoxId4" class="isSelected" /> Python
</td>
</tr>
</table>
<script>
   jQuery("#selectDemo").click(function () {
      jQuery(this).toggleClass("changeColor");
      if (jQuery(this).hasClass("changeColor")) {
         jQuery(".isSelected").prop("checked", true);
         jQuery(this).val("Want To UnSelect All Values");
      } else {
         jQuery(this).removeClass("changeColor");
         jQuery(".isSelected").prop("checked", false);
         jQuery(this).val("Want To Select All Values");
      }
   });
</script>
</body>
</html>

プログラムの実行方法

上記のコードをファイル名「anyName.html」（例：index.html）として保存し、VS Codeエディター上でそのファイルを右クリックして「Open with Live Server」を選択してください。Live Server拡張機能が未導入の場合でも、保存したHTMLファイルをブラウザで直接開けば同じように動作します。

実行結果

プログラムを実行すると、まず次のような画面が表示されます。

【jQuery】ボタン1回のクリックでチェックボックスを全選択・全解除する方法

続いて、画面上部のボタン「Want To Select All Values」をクリックしてみましょう。

【jQuery】ボタン1回のクリックでチェックボックスを全選択・全解除する方法

すべてのチェックボックスにチェックが入り、ボタンの表示が「Want To UnSelect All Values」に変わり、文字色も赤く変わります。

さらに、同じボタンをもう一度クリックすると、すべてのチェックが解除され、元の状態に戻ります。

【jQuery】ボタン1回のクリックでチェックボックスを全選択・全解除する方法

コードの仕組み

  • toggleClass("changeColor")：ボタンがクリックされるたびにchangeColorクラスを追加・削除し、文字色を赤に切り替えます。
  • hasClass("changeColor")：クラスの有無を判定し、「全選択」と「全解除」のどちらの処理を行うかを分岐させます。
  • prop("checked", true / false)：class="isSelected"を持つすべてのチェックボックスの選択状態を一括で設定します。
  • val()：ボタンの表示テキストを現在の状態に合わせて書き換えます。
  1. 【Android】ボタンをクリックして新しいアクティビティを起動する方法

    このチュートリアルでは、Androidアプリでボタンをクリックした際に新しいアクティビティ（画面）を起動する方法を解説します。Intentを使った画面遷移の基本が学べる内容なので、Android開発初心者の方にもおすすめです。 実装手順 ステップ1：新規プロジェクトを作成する Android Studioを開き、「File」→「New Project」を選択して、必要な項目をすべて入力し、新しいプロジェクトを作成します。 ステップ2：activity_main.xmlにコードを追加する res/layout/activity_main.xml に以下のコードを追加します。画面中央にボタンを1つ

  2. 【Python】Tkinterでボタンクリックイベントを処理する方法をわかりやすく解説

    Tkinterアプリケーションを開発していると、イベント処理の実装に悩むことがあります。アプリケーションの実行時に発生するアクションやイベントを適切に管理する必要があるためです。こうしたイベント処理において便利なのがButton（ボタン）ウィジェットです。Buttonウィジェットでは、command引数にコールバック関数を渡すことで、特定のタスクやイベントを実行できます。また、lambda式（無名関数）を使うことで、引数付きの関数を渡したり、エラーを回避しながら柔軟に処理を記述することも可能です。lambda関数は通常の関数と似ていますが、名前を持たず、簡潔に一行で定義できる点が特徴です。サン