チェック済みチェックボックスの数をカウントしたい。

Question

前提・実現したいこと

以下の画像のように、テーブルの各項目に設置してあるチェックボックスをチェック済みのものだけカウントしたいのですが、列ごとにカウントする方法が思い浮かびません。
(必要人数の項目の左の数字がカウントされている数です)

現状

実現したいこと

発生している問題・エラーメッセージ

今の状況ですと、列ごとに分類できておらず、どの列のチェックボックスをチェックしてもすべての列においてカウントが反映されてしまいます。(すべての列で同じカウント数になってしまう)

該当のソースコード

$(function() {
	$('input:checkbox').change(function() {
		var cnt = $('input:checkbox:checked').length;
		$('span.count_check1').text(cnt);
	}).trigger('change');
});
$(function() {
	$('input:checkbox').change(function() {
		var cnt = $('input:checkbox:checked').length;
		$('span.count_check2').text(cnt);
	}).trigger('change');
});
$(function() {
	$('input:checkbox').change(function() {
		var cnt = $('input:checkbox:checked').length;
		$('span.count_check3').text(cnt);
	}).trigger('change');
});
$(function() {
	$('input:checkbox').change(function() {
		var cnt = $('input:checkbox:checked').length;
		$('span.count_check4').text(cnt);
	}).trigger('change');
});

<table>
	<tr>
		<th>必要人数</th>
		<td><span class="count_check1"></span>/5</td>
		<td><span class="count_check2"></span>/3</td>
		<td><span class="count_check3"></span>/4</td>
		<td><span class="count_check4"></span>/3</td>
	</tr>
	<tr>
		<th>佐藤花子</th>
		<td><input type="checkbox" name="riyu" value="1"></td>
		<td><input type="checkbox" name="riyu" value="2"></td>
		<td><input type="checkbox" name="riyu" value="3"></td>
		<td><input type="checkbox" name="riyu" value="4"></td>
	</tr>

	<tr>
		<th>山田太郎</th>
		<td><input type="checkbox" name="riyu" value="1"></td>
		<td><input type="checkbox" name="riyu" value="2"></td>
		<td><input type="checkbox" name="riyu" value="3"></td>
		<td><input type="checkbox" name="riyu" value="4"></td>
	</tr>
	<tr>
		<th>鈴木一郎</th>
		<td><input type="checkbox" name="riyu" value="1"></td>
		<td><input type="checkbox" name="riyu" value="2"></td>
		<td><input type="checkbox" name="riyu" value="3"></td>
		<td><input type="checkbox" name="riyu" value="4"></td>
	</tr>
・
・
・
・
・
</table>

試したこと

列１,２,３,４に対応するデータごとにidを付けてJQueryで数えるチェックボックスの対象をそのIDのチェックボックスにした。

$(function() {
	$('input:checkbox').change(function() {
		var cnt = $('#check1 input:checkbox:checked').length;
		$('span.count_check1').text(cnt);
	}).trigger('change');
});
$(function() {
	$('input:checkbox').change(function() {
		var cnt = $('#check2 input:checkbox:checked').length;
		$('span.count_check').text(cnt);
	}).trigger('change');
});
$(function() {
	$('input:checkbox').change(function() {
		var cnt = $('#check3 input:checkbox:checked').length;
		$('span.count_check1').text(cnt);
	}).trigger('change');
});
$(function() {
	$('input:checkbox').change(function() {
		var cnt = $('#check4 input:checkbox:checked').length;
		$('span.count_check1').text(cnt);
	}).trigger('change');
});

<tr>
	<th>佐藤花子</th>
	<td id="check1"><input type="checkbox" name="riyu" value="1"></td>
	<td id="check2"><input type="checkbox" name="riyu" value="2"></td>
	<td id="check3"><input type="checkbox" name="riyu" value="3"></td>
	<td id="check4"><input type="checkbox" name="riyu" value="4"></td>
</tr>
<tr>
	<th>山田太郎</th>
	<td id="check1"><input type="checkbox" name="riyu" value="1"></td>
	<td id="check2"><input type="checkbox" name="riyu" value="2"></td>
	<td id="check3"><input type="checkbox" name="riyu" value="3"></td>
	<td id="check4"><input type="checkbox" name="riyu" value="4"></td>
</tr>

この方法だと列ごとの一番最初のチェックボックスしかカウントされませんでした。

Answer 1

Vanillaの例

const table = document.getElementsByTagName('table')[0];
table.querySelectorAll('[type="checkbox"]').forEach(chkbox => {
  chkbox.addEventListener('change', evt => {
    // 操作されたチェックボックスの親要素 (td) が何列目か
    const index = evt.currentTarget.parentNode.cellIndex;

    // 対応する列のヘッダー (th)
    const th = table.rows[0].cells[index];

    // ヘッダーの textContent を書き換える
    // split('/') の配列の各要素 (初期値は ['', '3']) を処理する
    th.textContent = th.textContent.split('/').map((str, idx) => {
      // 分母に対しては何もしない
      if(idx !== 0) return str;

      // チェックボックスが操作された結果、チェックされた状態なのかどうか
      const checked = evt.currentTarget.checked;

      // 文字列が空のときは、チェック状態なら1, そうでないなら0を返す
      if(!str.length) return checked? 1 : 0;

      // チェック状態なら+1, そうでないなら-1した値を返す
      return parseInt(str, 10) + (checked? 1 : -1);
    }).join('/');
  });
});

Comments

[think_tan]

コメント付きでとても理解しやすかったです！！
こんな方法もあったのですね、本当にありがとうございます。

[thyda.eiqau]

yambejpさんの回答に対するコメントを拝見しました。以下はそのコメントに対するコメントです。 (yambejpさんの回答に対するコメントではないので、こちらに書きます)
何をやっているのかいまいち理解できていないものをコピペして動かそうという考え方は大変危険なので、理解できていないものは使わずに、勉強して理解できるようになってから使うようにしてください。

Answer 2

命題自体の意図を理解できていなかもしれませんがこんな感じでしょうか？

<script>
$(function(){
  $(':checkbox').on('change',function(){
    var idx=$(this).closest('tr').find(':checkbox').index(this);
    var len=$('tr').filter(function(){
      return $(this).find(':checkbox:eq('+idx+')').is(':checked');
    }).length;
    $(this).closest('table').find('tr:eq(0) span:eq('+idx+')').text(len);
  }).filter(':lt(4)').trigger('change');
});
</script>


<table>
<tr>
<th>必要人数</th>
<td><span></span>/5</td>
<td><span></span>/3</td>
<td><span></span>/4</td>
<td><span></span>/3</td>
</tr>
<tr>
<th>佐藤花子</th>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<th>山田太郎</th>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<th>鈴木一郎</th>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
</table>

Comments

[think_tan]

この通り記述したら出来ました。当方JQueryには全然詳しくないので何をやっているのかいまいち理解でていませんが、助かりました！
本当にありがとうございます。