JS(またはjquery)で、チェックボックス一括チェックと金額の集計を同時に行いたい

Question

jSにて、table内のチェックボックスを一括チェックと、解除機能と
チェックした金額を合計する機能を同時に実装したいのですが、
単体ごとは、動くのですが、統合しようとすると集計機能が動かない等で、
うまく実装することができません。
（一括チェック、チェック解除と合わせて、個別チェック時も集計機能が動くようにしたいです）

すべてチェックするのサンプルです
https://www.softel.co.jp/blogs/tech/archives/4346

チェック時、該当する金額を元に集計するサンプルです。
http://pstar.hatenablog.com/entry/2017/08/31/120000

以下のようなtable情報に実装したいです。
(name=multi_chk[] の中身は乱数と考えください。)

<table> <tr> <td><input type=checkbox name=multi_chk[ssqbsaae] value="true"></td> <td>200</td> </tr> <tr> <td><input type=checkbox name=multi_chk[xxyyexee] value="true"></td> <td>400</td> </tr> </table>

JSは何分勉強不足のため、ご助力いただけれ幸いです。

Comments

[yambejp]

なにをトリガーに全チェック・解除をするのか？
合計値を計算してどこに表示するのか？
最低限上記を追記ください

[pg_beginner]

慣れないため、ご指摘ありがとうございます。

<!-- トリガーは、ボタンでも以下のようなチェックボックスでも大丈夫です。 -->
<input type=checkbox name=all><br>

<!-- 結果は、以下のようなテキストボックスに表示されると嬉しいです。 -->
<input type=text name=anser_price><br>

<!-- 以下は、そのままです。 -->

<table>

<tr>
<td><input type=checkbox name=multi_chk[ssqbsaae] value="true"></td>
<td>200</td>
</tr>
<tr>
<td><input type=checkbox name=multi_chk[xxyyexee] value="true"></td>
<td>400</td>
</tr>
</table>

Answer 1

inputをいじるならformがあったほうが歯切れがいい
ざっくりこんな感じ

<script>
window.addEventListener('DOMContentLoaded', function(e){
  set_answer();
  document.querySelector('#f1 [name=all]').addEventListener('change',function(e){
    [].forEach.call(document.querySelectorAll('#f1 [name^=multi_chk]'),function(x){
      x.checked=e.target.checked;
    });
    set_answer();
  });
  [].forEach.call(document.querySelectorAll('#f1 [name^=multi_chk]'),function(x){
    x.addEventListener('change',function(){
      set_answer();
    });
  });
  function set_answer(){
    var num=[].map.call(document.querySelectorAll('#f1 [name^=multi_chk]:checked'),function(x){
      return parseInt(x.closest("td").nextElementSibling.textContent);
    }).concat(0).reduce(function(x,y){
      return x+y;
    });
    document.querySelector('[name=anser_price]').value=num;
  }
});
</script>
<form id="f1">
<table>
<tr>
<td><input type="checkbox" name="multi_chk[1]" value="true"></td>
<td>200</td>
</tr>
<tr>
<td><input type="checkbox" name="multi_chk[2]" value="true"></td>
<td>400</td>
</tr>
<tr>
<td><input type="checkbox" name="multi_chk[3]" value="true"></td>
<td>150</td>
</tr>
<tr>
<td><input type="checkbox" name="multi_chk[4s]" value="true"></td>
<td>300</td>
</tr>
</table>
<label><input type="checkbox" name="all">all</label><br>
<input type="text" name="anser_price">
</form>

jQuery

上記ソースをjQueryで書くとこう

$(function(){
  $('#f1 [name=all],#f1 [name^=multi_chk]').on('change',function(){
    if($(this).attr('name')=="all") $('#f1 [name^=multi_chk]').prop('checked',$(this).prop('checked'));
    var num=$('#f1 [name^=multi_chk]:checked').map(function(){
      return parseInt($(this).closest('td').next().text());
    }).get().concat(0).reduce(function(x,y){
      return x+y;
    });
    $('[name=anser_price]').val(num);
  }).eq(0).trigger('change');
});

Comments

[pg_beginner]

おお！実装することができました！
ただ、一部説明が漏れていまして、tdが４つ程度あった場合、どのように編集すればよろしいでしょうか？

■現在■

<tr>
<td><input type="checkbox" name="multi_chk[1]" value="true"></td>
<td>200</td>
</tr>

■こうなっている場合■

<tr>
<td><input type="checkbox" name="multi_chk[1]" value="true"></td>
<td>コメント１</td>
<td>項目１</td>
<td>200</td>
</tr>

多分、ここを改修する気がするのですが。。。
return parseInt(x.closest("td").nextElementSibling.textContent);

[yambejp]

javascript版であればtrの3番めの要素を指定して
return parseInt(x.closest("tr").children[3].textContent);
とか、次の次の次の要素を拾って
return parseInt(x.closest("td").nextElementSibling.nextElementSibling.nextElementSibling.textContent);
とか。

jQuery版であれば、後ろの兄弟の2番目で
return parseInt($(this).closest('td').nextAll().eq(2).text());