jQueryを使用して全ての項目にチェックを入れるチェックボックスを作成する

JavaScript,jQuery

表題通りの内容です。

index.html

<head>
  <!-- JQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
  <div>
      <div class="all-check-box"><label><input type="checkbox" class="all-check" value="" name="all-check">全て</label></div>
      <ul class="list">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="" id="flexCheck1" />
          <label class="form-check-label" for="flexCheck1">朝食</label>
          <input class="form-check-input" type="checkbox" value="" id="flexCheck2" />
          <label class="form-check-label" for="flexCheck2">昼食</label>
          <input class="form-check-input" type="checkbox" value="" id="flexCheck3" />
          <label class="form-check-label" for="flexCheck3">夕食</label>
        </div>
      </ul>
  </div>
  <script>
    $(".all-check").on("click", function () {
      $(this).parents(".all-check-box").siblings(".list").find(".form-check-input").prop('checked', this.checked);
    });
    $(".form-check-input").on("click", function () {
      if ($(this).parents(".list").find(".form-check-input:checked").length == $(this).parents(".list").find("input").length) {
        $(this).parents(".list").siblings(".all-check-box").find(".all-check").prop("checked", true);
      } else {
        $(this).parents(".list").siblings(".all-check-box").find(".all-check").prop("checked", false);
      }
    });
  </script>
</body>

簡単な解説

sample1.js

    $(".all-check").on("click", function () {
      $(this).parents(".all-check-box").siblings(".list").find(".form-check-input").prop('checked', this.checked);
    });

parentsで親要素を取得し、siblingsでall-check-boxの兄弟要素であるlistを取得する。
さらにfindでその子要素であるform-check-inputを全て対象にして、propでチェックされている状態を渡す。

sample2.js

      if ($(this).parents(".list").find(".form-check-input:checked").length == $(this).parents(".list").find("input").length) {
        $(this).parents(".list").siblings(".all-check-box").find(".all-check").prop("checked", true);
      } else {
        $(this).parents(".list").siblings(".all-check-box").find(".all-check").prop("checked", false);
      }

チェックされているチェックボックスの要素数がチェックボックスの値と同じ場合、「全て」にチェックを入れる、そうでない場合はチェックを外す。

参考資料

jquery

gifアニメ

ユーザー登録して、Qiitaをもっと便利に使ってみませんか。

あなたにマッチした記事をお届けします
ユーザーやタグをフォローすることで、あなたが興味を持つ技術分野の情報をまとめてキャッチアップできます
便利な情報をあとで効率的に読み返せます
気に入った記事を「ストック」することで、あとからすぐに検索できます

より詳しく

Naoki Takahashi

@philosophy_note

G's ACADEMY TOKYO LAB11期(2021.4~2021.11)

@f98sdj

2022-04-19 18:36

これくらいであればjQueryを使うまでもないかな。

const
  qs = s => document.querySelector(s),
  qsa = s => document.querySelectorAll(s),
  all = qs('.all-check'),
  individual = qsa('.form-check-input');

qs('.list').addEventListener('click', () => all.checked = individual.length === qsa('.form-check-input:checked').length);
all.addEventListener('click', () => individual.forEach(e => e.checked = all.checked));

あなたもコメントしてみませんか :)

ユーザー登録

すでにアカウントを持っている方はログイン

記事投稿イベント開催中

データに関する記事を書こう！

2022/03/14~2022/04/30

新人プログラマ応援 - みんなで新人を育てよう！

2022/03/27~2022/04/30

すべて見る

記事の改善

編集リクエストを送る

記事の情報

編集履歴編集リクエスト一覧 LGTMしたユーザー一覧 Markdown で本文を見る