teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問JQueryでのチェックボックスの制御と件数取得

編集履歴

質問編集履歴

4

戻し

2020/07/04 04:34

投稿

chintao1224
chintao1224

スコア155

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
  </thead>
18
18
 
19
- <tbody id="boxes">
19
+ <tbody>
20
20
 
21
21
  <tr><td><input type="checkbox" class="chk" /></td><td>テスト1</td></tr>
22
22
 
@@ -46,47 +46,27 @@
46
46
 
47
47
  });
48
48
 
49
- $('.chk').on('click', function() {
49
+ $("input[type='checkbox']").on('click', function () {
50
50
 
51
- alert('ok');
51
+ if ($(".chk:checked").length > 0) {
52
52
 
53
- if ($('#boxes :checked').length == $('#boxes :input').length) {
53
+ $('.table thead').css('width', '1210px');
54
54
 
55
- // 全てのチェックボックスにチェックが入っていたら、「全選択」 = checked
55
+ $('.table tbody').css('width', '1228px');
56
56
 
57
- $('#all').prop('checked', true);
57
+ $('#buttonbar').css('display','block');
58
58
 
59
- } else {
59
+ } else {
60
60
 
61
- // 1つでもチェックが入っていたら、「全選択」 = checked
61
+ $('.table thead').css('width', '1328px');
62
62
 
63
- $('#all').prop('checked', false);
63
+ $('.table tbody').css('width', '1346px');
64
64
 
65
- }
65
+ $('#buttonbar').css('display','none');
66
66
 
67
- });
67
+ }
68
68
 
69
- //$("input[type='checkbox']").on('click', function () {
70
-
71
- // if ($(".chk:checked").length > 0) {
72
-
73
- // $('.table thead').css('width', '1210px');
74
-
75
- // $('.table tbody').css('width', '1228px');
76
-
77
- // $('#buttonbar').css('display','block');
78
-
79
- // } else {
80
-
81
- // $('.table thead').css('width', '1328px');
82
-
83
- // $('.table tbody').css('width', '1346px');
84
-
85
- // $('#buttonbar').css('display','none');
86
-
87
- // }
88
-
89
- //});
69
+ });
90
70
 
91
71
  });
92
72
 
@@ -104,8 +84,6 @@
104
84
 
105
85
  上記コードでは全く反応しません。
106
86
 
107
- alertが出ません。
108
-
109
87
 
110
88
 
111
89
  どなたか教えてください。

3

編集

2020/07/04 04:34

投稿

chintao1224
chintao1224

スコア155

test CHANGED
File without changes
test CHANGED
@@ -66,27 +66,27 @@
66
66
 
67
67
  });
68
68
 
69
- $("input[type='checkbox']").on('click', function () {
69
+ //$("input[type='checkbox']").on('click', function () {
70
70
 
71
- if ($(".chk:checked").length > 0) {
71
+ // if ($(".chk:checked").length > 0) {
72
72
 
73
- $('.table thead').css('width', '1210px');
73
+ // $('.table thead').css('width', '1210px');
74
74
 
75
- $('.table tbody').css('width', '1228px');
75
+ // $('.table tbody').css('width', '1228px');
76
76
 
77
- $('#buttonbar').css('display','block');
77
+ // $('#buttonbar').css('display','block');
78
78
 
79
- } else {
79
+ // } else {
80
80
 
81
- $('.table thead').css('width', '1328px');
81
+ // $('.table thead').css('width', '1328px');
82
82
 
83
- $('.table tbody').css('width', '1346px');
83
+ // $('.table tbody').css('width', '1346px');
84
84
 
85
- $('#buttonbar').css('display','none');
85
+ // $('#buttonbar').css('display','none');
86
86
 
87
- }
87
+ // }
88
88
 
89
- });
89
+ //});
90
90
 
91
91
  });
92
92
 

2

編集

2020/07/04 02:14

投稿

chintao1224
chintao1224

スコア155

test CHANGED
File without changes
test CHANGED
@@ -68,8 +68,6 @@
68
68
 
69
69
  $("input[type='checkbox']").on('click', function () {
70
70
 
71
- alert('OK');
72
-
73
71
  if ($(".chk:checked").length > 0) {
74
72
 
75
73
  $('.table thead').css('width', '1210px');

1

追記

2020/07/04 02:04

投稿

chintao1224
chintao1224

スコア155

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
  </thead>
18
18
 
19
- <tbody>
19
+ <tbody id="boxes">
20
20
 
21
21
  <tr><td><input type="checkbox" class="chk" /></td><td>テスト1</td></tr>
22
22
 
@@ -46,7 +46,29 @@
46
46
 
47
47
  });
48
48
 
49
+ $('.chk').on('click', function() {
50
+
51
+ alert('ok');
52
+
53
+ if ($('#boxes :checked').length == $('#boxes :input').length) {
54
+
55
+ // 全てのチェックボックスにチェックが入っていたら、「全選択」 = checked
56
+
57
+ $('#all').prop('checked', true);
58
+
59
+ } else {
60
+
61
+ // 1つでもチェックが入っていたら、「全選択」 = checked
62
+
63
+ $('#all').prop('checked', false);
64
+
65
+ }
66
+
67
+ });
68
+
49
69
  $("input[type='checkbox']").on('click', function () {
70
+
71
+ alert('OK');
50
72
 
51
73
  if ($(".chk:checked").length > 0) {
52
74
 
@@ -84,6 +106,8 @@
84
106
 
85
107
  上記コードでは全く反応しません。
86
108
 
109
+ alertが出ません。
110
+
87
111
 
88
112
 
89
113
  どなたか教えてください。