チェックボックスの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件

グルーピングして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>

投稿2024/11/13 07:05

yambejp

総合スコア118164

sanchunaka

2024/11/13 12:42

いつもお世話になっております。ネット上に似たようなものがあったのですが、少し理解できませんでした。あとでこのコードを勉強させていただきます。回答ありがとうございます。

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

ベストアンサー

そもそも $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

総合スコア754

sanchunaka

2024/11/13 12:35

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

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

実現したいこと

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

該当のソースコード

試したこと・調べたこと

上記の詳細・結果

補足

参考

関連した質問