チェックボックスのcheckedの数を表示したい

実現したいこと

複数のcheckboxがあってcheckboxをチェックすると「選択された要件の数は1個です。」
次のcheckboxをチェックすると「選択された要件の数は２個です。」と表示したい
逆にcheckboxのチェック外すと「選択された要件の数は1個です。」と表示し、
前のcheckboxをチェック外すと「選択された要件の数は0個です。」と表示したい

発生している問題・分からないこと

最初のcheckboxにチェックを入れると「選択された要件の数は1個です。」と出るのですが
そのあとがどうしたらいいかわからない

チェックボックスのチェックした数を増やしたり、減らしたりする方法ががわかりません。
コードのどこに配置すべきかもいまいちわからないので。よろしくお願いいたします。

該当のソースコード

jQuery編　HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8" />
5  <title>jQueryのセレクタを理解する</title>
6  <link rel="stylesheet" href="./css/style.css">
7  <script src="https://code.jquery.com/jquery-3.2.1.min.js"
8  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
9  crossorigin="anonymous"></script>
10  <script src="./js/check-traversal.js"></script>
11</head>
12<body>
13  <p class="count-container">選択された要件の数は<span class="count"></span>個です。</p>
14  <ul>
15    <li class="parent">parent
16      <div class="child">
17        <input type="checkbox" class="check">checkbox
18      </div>
19      <div class="log">log</div>
20    </li>
21    <li class="parent">parent
22      <div class="child">
23        <input type="checkbox" class="check">checkbox
24      </div>
25      <div class="log">log</div>
26    </li>
27  </ul>
28</body>
29</html>

JavaScript
1// ./js/check-traversal.js
2(function ($) {
3
4  $(document).ready(function () {
5
6    $('.check').on('click', function (e) {
7      let $selected = [];
8      
9      $selected = $(e.currentTarget).parent().siblings('.log')
10
11      if ($(e.currentTarget).prop('checked')) {
12
13        // マッチした要素にスタイルを付与する
14        $selected.addClass("bingo").text('チェックしました');
15
16      } else {
17        $selected.removeClass("bingo").text('log');
18      }
19      // マッチした要素にスタイルを付与する
20      $selected.each(function (index) {
21
22        $(this).addClass("bingo");
23
24      });
25      $(".count").text($selected.length);
26    });
27
28  });
29
30})(jQuery);
31

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

チェックボックス
CODEPREPで上のコーナーを勉強しています。
widows10,vscodeを使っています。
実践例　1-10は
「選択された要素の数は個です。」が表示されない状態で「clear」になっているのでそれを解決したい。

補足

特になし

sanchunaka

2024/11/13 07:01

// ./css/style.css * { box-sizing: border-box; } body { margin: 0; padding: 0; } div { padding: 5px 20px; background: #FEF58B; } div:not(:last-child) { margin-bottom: 5px; } p { margin: 5px 0; } label > span { display: block; } ul { list-style: none; } li { padding: 5px; } parent { background: #FED28F; } /*HTML上でアニメーションを表現する方法は大きく３つあります。 transition（cssプロパティ） animation（cssプロパティ） animate（jQuery関数）*/ .bingo { background: #EF476F; color: #FFF; outline: 3px solid #EF476F; transition: background, outline, color, 0.5s; } .container { display: flex; flex-wrap: wrap; } .container label { flex-grow: 1; flex-basis: 100px; margin: 5px; padding: 10px; border: 1px solid #FFF; } .count-container { background: #555; color: #FFF; position: fixed; bottom: 0; right: 0; margin: 0 !important; padding: 5px 20px; border-radius: 20px 20px 0 0; opacity: 0.8; } .count { display: inline-block; height: 30px; width: 30px; margin: 0 5px; font-size: 19px; line-height: 30px; text-align: center; border-radius: 50%; color: #FFF; background: #118AB2; } .container { background: #FFF; display: flex; } .container > div { background: #FFF; flex-grow: 1; }

juner

2024/11/13 08:20

それは本文に含めてください！（質問のコメント欄を見ている人しかわからないので。

行動規範の内容に同意します

回答2件

ベストアンサー

そもそも $selected がログの設定先でしかないので

その数を数えても意味が無いのではないでしょうか？

その為、下記のところを

js
1$(".count").text($selected.length);

ul から選択されているチェックボックスを数える形に修正したらいいのではないでしょうか？

js
1const count = $(e.currentTarget).closest('ul').find(':checked').length;
2$(".count").text(count);

参考

投稿2024/11/13 08:34

編集2024/11/14 01:02

juner

総合スコア453

sanchunaka

2024/11/13 12:35

回答ありがとうございます。試したところ問題が解決しました！ベストアンサーに選ばせていただきました。助かりました。疲れていて収拾できませんでした。

行動規範の内容に同意します

グルーピングしてchangeイベントが発生する事に処理をしてみては？

html
1<script>
2const count_chk=()=>{
3  document.querySelectorAll('.wrap').forEach(x=>{
4    const len=x.querySelectorAll('[type=checkbox]:checked').length;
5    const cnt=x.querySelector('.count');
6    cnt.textContent=len;
7  });
8}
9window.addEventListener('DOMContentLoaded',count_chk);
10document.addEventListener('change',count_chk);
11</script>
12<div class="wrap">
13<p class="count-container">選択された要件の数は<span class="count"></span>個です。</p>
14<ul>
15<li><label><input type="checkbox">1</label></li>
16<li><label><input type="checkbox">2</label></li>
17<li><label><input type="checkbox">3</label></li>
18</ul>
19</div>
20<div class="wrap">
21<p class="count-container">選択された要件の数は<span class="count"></span>個です。</p>
22<ul>
23<li><label><input type="checkbox">1</label></li>
24<li><label><input type="checkbox">2</label></li>
25<li><label><input type="checkbox">3</label></li>
26</ul>
27</div>