tdのチェックボックスのclickが反応しない

tableの先頭行のthにチェックボックスを、各trの左列にチェックボックスを表示しています。
全選択のチェックボックスをチェックした場合、各行のチェックボックスをチェックさせ、各行のチェックボックスを全てチェックした場合、全選択のチェックボックスをチェックさせるというのをやりたいです。

わからないのは各行のチェックボックスを全てチェックした場合、全選択のチェックボックスをチェックさせるというものです。

どうしても各行のチェックボックスをclickした場合が、指定の仕方が良くないのか反応してくれません。

html
1<table>
2  <thead>
3    <tr><th><input type="checkbox" id="all" /></th><th>テスト列</th></tr>
4  </thead>
5  <tbody id="boxes">
6    <tr><td><input type="checkbox" class="chk" /></td><td>テスト1</td></tr>
7    <tr><td><input type="checkbox" class="chk" /></td><td>テスト2</td></tr>
8    <tr><td><input type="checkbox" class="chk" /></td><td>テスト3</td></tr>
9    <tr><td><input type="checkbox" class="chk" /></td><td>テスト4</td></tr>
10    <tr><td><input type="checkbox" class="chk" /></td><td>テスト5</td></tr>
11    ...
12  </tbody>
13</table>

jquery
1$(function() {
2  $('.chk').on('click', function() {
3    alert('ok');
4    if ($('#boxes :checked').length == $('#boxes :input').length) {
5      // 全てのチェックボックスにチェックが入っていたら、「全選択」 = checked
6      $('#all').prop('checked', true);
7    } else {
8      // 1つでもチェックが入っていたら、「全選択」 = checked
9      $('#all').prop('checked', false);
10    }
11  });
12});

上記コードではalertが出てくれません。
指定の仕方が良くないのでしょうか。

ご存知の方教えてください。

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

回答1件

ベストアンサー

html
1<!doctype html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport"
6          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7    <meta http-equiv="X-UA-Compatible" content="ie=edge">
8    <title>Document</title>
9</head>
10<body>
11<table>
12    <thead>
13    <tr>
14        <th><input type="checkbox" id="all"/></th>
15        <th>テスト列</th>
16    </tr>
17    </thead>
18    <tbody id="boxes">
19    <tr>
20        <td><input type="checkbox" class="chk"/></td>
21        <td>テスト1</td>
22    </tr>
23    <tr>
24        <td><input type="checkbox" class="chk"/></td>
25        <td>テスト2</td>
26    </tr>
27    <tr>
28        <td><input type="checkbox" class="chk"/></td>
29        <td>テスト3</td>
30    </tr>
31    <tr>
32        <td><input type="checkbox" class="chk"/></td>
33        <td>テスト4</td>
34    </tr>
35    <tr>
36        <td><input type="checkbox" class="chk"/></td>
37        <td>テスト5</td>
38    </tr>
39    </tbody>
40</table>
41<script src="https://code.jquery.com/jquery-3.5.1.min.js"
42        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
43<script>
44    $(function () {
45        $('#all').on('click', function () {
46            $('tbody :checkbox').prop('checked', $(this).prop('checked'))
47        });
48        $('tbody :checkbox.chk').on('click', function () {
49            $('#all').prop('checked',
50                $('tbody :checkbox.chk:checked').length === $('tbody :checkbox.chk').length);
51        });
52    });
53</script>
54</body>
55</html>