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

【jQuery】ボタンクリック1回で複数のチェックボックスの選択・解除を切り替える方法

実装方法

ボタンのクリック1回で複数のチェックボックスの選択状態をまとめて切り替えたい場合は、idプロパティを指定した jQuery() を使用します。以下に具体的なサンプルコードを示します。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<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」を選択してください。

実行結果

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

【jQuery】ボタンクリック1回で複数のチェックボックスの選択・解除を切り替える方法

ここで、ボタン「Want To Select All Values（すべての値を選択）」をクリックすると、すべてのチェックボックスにチェックが入り、同時にボタンの文字色が赤色へと変化します。

【jQuery】ボタンクリック1回で複数のチェックボックスの選択・解除を切り替える方法

さらに、ボタン「Want To UnSelect All Values（すべての値の選択を解除）」をクリックすると、すべてのチェックボックスの選択が一括で解除されます。

【jQuery】ボタンクリック1回で複数のチェックボックスの選択・解除を切り替える方法

コードのポイント

このサンプルでは、toggleClass() を使ってボタンに「changeColor」クラスが付与されているかどうかを判定し、hasClass() の結果に応じて処理を分岐させています。

  • クラスが付与されている場合：.prop("checked", true) ですべてのチェックボックスを選択状態にし、val() でボタンの表示テキストを「選択解除用」に変更します。
  • クラスが付与されていない場合：.prop("checked", false) ですべてのチェックボックスの選択を解除し、ボタンの表示テキストを元に戻します。

このように、prop() メソッドを使用すれば checked プロパティを直接制御できるため、チェックボックスがいくつあっても共通クラス（ここでは isSelected）を指定するだけで、簡単に全選択・全解除を実装できます。

  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関数は通常の関数と似ていますが、名前を持たず、簡潔に一行で定義できる点が特徴です。サン