チェックボックスにチェックを付けた際に同じくくりにされている数値を取得していく方法

Question

宜しくお願い致します。

チェックボックスにチェックを付けた際に同じくくりにされている数値を取得し、チェックを付けた数に応じて数値を合計していく処理のやり方をJSで考えております。

■やりたいこと

下記のようなチェックボックスがならんでいた際に、チェックを付けた際に数値を足していき、合計値を画面移換なしで表示したいです。

□東京（5）

□大阪（8）

□福岡（9）

↑　上記の場合は合計22を表示

■制限事項

・システムの関係上、checkboxのタグ内は手動で変更や追加ができない。
→class名を利用して数値を取得できないかと考えています。(参考タグは下記のコードをご覧ください。)

<li data-count="5">
	<input type="checkbox" value="city2" name="city">
	<label>東京<span class="count">(5)</span></label>
</li>
<li data-count="8">
	<input type="checkbox" value="city3" name="city">
	<label>大阪<span class="count">(8)</span></label>
</li>

・チェックをつけた際にチェックボックスのvalueの値ではなく、同じくくりにあるclass="count"の値(5や8)をもってきたいとかんがえています。

■わからない点
・同じクラス名などの要素に囲まれた各ボックス内の値を取得し、合計を表示する処理
・チェックを付けたものだけ、上記の値を取得する処理

尚、現状で下記のようなイメージで考えていますが具体的な方法がまだわかっておりません。

<script type="text/javascript">
javascript:(
  function(){
　　//input:checkbox:checkedになった際に、処理をおこなう
    var elements = document.getElementsByClassName("count");
    //innerHTMLなどで数値のみを取得し、足して表示する処理を行う
  }
)();	
</script>

宜しくお願い致します。

Answer 1

// type属性が"checkbox"のinput要素を取得しforEachでループ処理
document.querySelectorAll('input[type="checkbox"]').forEach(elm => {
  // "change"イベントのリスナを登録
  elm.addEventListener("change", () => {
    const total = [].reduce.call(
      // チェック状態のinput要素を取得(画面内に処理に含みたくないチェックボックスやラジオボタン等がある場合は適宜セレクタを変更する等対処する)
      document.querySelectorAll("input:checked"),
      (sum, elm) => {
        // 取得した要素の親要素を取得
        const num = elm.parentNode
          // 親要素の子のcountクラスを持つ要素を取得
          .querySelector(".count")
          // 要素の内容を取得し、数字以外を削除
          .textContent.replace(/[^0-9]/g, "");
        // 上記で取得した数字を数値に変換して集計変数に加算
        sum += parseInt(num);
        return sum;
      },
      0
    );
    // とりあえず取得した合計値をコンソールに表示するだけ
    console.log(total);
  });
});

数値の集計に使用しているreduce関数については下記リンクを参照してください。
Array.prototype.reduce(MDN)

Comments

[tomato01]

ご連絡が遅くなり申し訳ございませんでした。

教えて頂いたコードでまさに自分がやりたかったことが実現できました！ありがとうございます。
もし可能でしたら、簡単で良いので頂いたコードの解説をいただけましたら幸いでございます。

宜しくお願い致します。

[tomato01]

お世話になっております。

すみません、上記のコードで一部のページでは数値を取得できたのでですが、違うページで同じことをやったところ下記のエラーが出てカウントができませんでした。

Uncaught TypeError: Cannot read property 'textContent' of null
at NodeList.reduce (<anonymous>)
at HTMLInputElement.<anonymous>

おそらくhtml内の違う要素から影響が出ている可能性が考えられます。
抽出範囲を絞ったり、他のコードから影響を受けないような記載方法はありますでしょうか。

[ryo_y]

回答を編集し、コードの簡単な解説をコメントで追加しました。
別のページでエラーになる件については、`reduce`内の数値取得処理を質問で提示されたHTMLのみの場合を前提として書いているため、querySelectorのセレクタ指定を工夫するなどして、処理に必要な要素のみを取得するようにしてみてください。

[tomato01]

ご丁寧にコメントをつけて頂きありがとうございます！
自分でもさらに確認してみように致します。ありがとうございます。