tableのヘッダ部にあるcheckboxをクリックするとデータ部のcheckbox全てがON/OFFするプログラミングを作成しています。

html
1<tr class="">
2    <th><input type="checkbox" id ="checkAll"/></th>
3    <th>社員番号</th>
4    <th>社員名</th>
5</tr>
6<tr class="list">
7    <td class="checkboxParent">
8        <input class="Select" type="checkbox"  name="chk1">
9    </td>
10    <td class="Data">1</td>
11    <td class="Data">社員A</td>
12</tr>
13<tr class="list">
14    <td class="checkboxParent">
15        <input class="Select" type="checkbox"  name="chk1">
16    </td>
17    <td class="Data">2</td>
18    <td class="Data">社員B</td>
19</tr>

上記のHTMLの場合、

Javascript
1$(function () {
2    var checkAll = '#checkAll';
3    var checkBox = "input[name='chk1']";
4    $( checkAll ).on('click', function() {
5        $( checkBox ).prop('checked', this.checked );
6    });

上記のJSでイベントが発生し、chk1のチェックボックスがON/OFFされます。
これに

Javascript
1$(checkBox).on( 'click', function() {
2});

を追加し、個別にチェックボックスがクリックされた時の処理を入れようとしているのですが、clickイベントが発生しません。

イベントが発生しない理由がわからないので、わかる方がいれば教えてください。

追記------------------------------
上記のHTMLのTDタグはわかりやすくするためにHTMLに直接書いてますが、
実際はPOST通信し、DBから取得した内容によってTDの中身は変わります。

その通信タイミングがjsのイベントの登録の後に実行されているため、イベント登録ができてないということだと思います。

この場合、POST通信後にTDを設定し、その後イベントの登録をすればいいのかと思いますが、可能でしょうか？

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

回答2件

ベストアンサー

こういうこと？
(多分HTMLロード終わってないときにイベント登録しようとしてるのがまずい)

html
1<html>
2<head>
3<meta charset="UTF-8">
4<meta name="viewport" content="width=device-width">
5<title>トップページ</title>
6<script
7  src="https://code.jquery.com/jquery-3.3.1.min.js"
8  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
9  crossorigin="anonymous"></script>
10<script>
11</script>
12</head>
13<body>
14
15<table>
16<tr class="">
17    <th><input type="checkbox" id ="checkAll"/></th>
18    <th>社員番号</th>
19    <th>社員名</th>
20</tr>
21<tr class="list">
22    <td class="checkboxParent">
23        <input class="Select" type="checkbox"  name="chk1">
24    </td>
25    <td class="Data">1</td>
26    <td class="Data">社員A</td>
27</tr>
28<tr class="list">
29    <td class="checkboxParent">
30        <input class="Select" type="checkbox"  name="chk1">
31    </td>
32    <td class="Data">2</td>
33    <td class="Data">社員B</td>
34</tr>
35</table>
36</body>
37<script src="./jquerytest.js">
38</script>
39</html>

jquerytest.js

JavaScript
1$(function () {
2    var checkBox = "input[name='chk1']";
3    var checkAll = '#checkAll';
4    $( checkAll ).on('click', function(e) {
5        $( checkBox ).prop('checked', this.checked );
6    });
7    
8    $(checkBox).on( 'click', function(e) {
9        console.log(e);
10    });
11});

でconsole.log部分来ました

投稿2018/11/27 06:24

編集2018/11/27 07:22

rururu3

総合スコア5545

limitman80

2018/11/27 06:29

js関係はjsファイルにして読み込ませているのですが、読み込ませるタイミングがhtmlファイルの最後に記載しています。このタイミングが遅いということでしょうか？確かにこのHTMLだとイベントが発生しますね。

rururu3

2018/11/27 06:36

https://api.jquery.com/jQuery/#jQuery3 ロード後に処理したい場合はjQuery( callback )でやるのが確実です

limitman80

2018/11/27 07:11

callback でやるようにしたのですが、やはりイベントが発生しません。

rururu3

2018/11/27 07:23

回答編集しましたが来ましたよ

limitman80

2018/11/27 08:21

こちらのjsファイル内で他の処理が邪魔してるのかもしれません。もう少し探ってみます。

limitman80

2018/11/27 08:57

追記したのですが、jsファイル内でイベント登録後にTDタグの設定をしてました。 post通信後にイベント登録する方法はありますでしょうか？

limitman80

2018/11/27 09:05

POST通信が成功した後にイベント登録したらいけました！ありがとうございます。

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

javascript
1$(function(){
2  $('#checkAll').on('change', function() {
3    $('input[name=chk1]').prop('checked', $(this).prop('checked'));
4  });
5});

追記

javascript
1<script>
2$(function(){
3  $('#checkAll').on('click', function() {
4    $('input[name=chk1]').prop('checked', $(this).prop('checked')).trigger('change');
5  });
6  $('input[name=chk1]').on('change',function(){
7    console.log($(this).val());
8  })
9});
10</script>
11
12<table>
13<tbody>
14<tr class="">
15    <th><input type="checkbox" id ="checkAll"/></th>
16    <th>社員番号</th>
17    <th>社員名</th>
18</tr>
19<tr class="list">
20    <td class="checkboxParent">
21        <input class="Select" type="checkbox"  name="chk1" value="1">
22    </td>
23    <td class="Data">1</td>
24    <td class="Data">社員A</td>
25</tr>
26<tr class="list">
27    <td class="checkboxParent">
28        <input class="Select" type="checkbox"  name="chk1" value="2">
29    </td>
30    <td class="Data">2</td>
31    <td class="Data">社員B</td>
32</tr>
33<tr class="list">
34    <td class="checkboxParent">
35        <input class="Select" type="checkbox"  name="chk1" value="3">
36    </td>
37    <td class="Data">3</td>
38    <td class="Data">社員C</td>
39</tr>
40</tbody>
41</table>