teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

HTMLと追記

2018/12/17 11:54

投稿

limitman80
limitman80

スコア40

title CHANGED
File without changes
body CHANGED
@@ -7,4 +7,44 @@
7
7
  ```
8
8
  今Tableは100行分最初に用意しておき、必要に応じて10行だったり20行だったりを表示しています。
9
9
  しかし上記の方法では画面に見えてない残りの90行分もチェックボックスがONされてしまいます。
10
- 表示されている行のみチェックONさせる方法はないでしょうか?
10
+ 表示されている行のみチェックONさせる方法はないでしょうか?
11
+ ```html
12
+ <table id=srctable>
13
+ <thead>
14
+ <tr>
15
+ <th><input type="checkbox" id="checkAll"></th>
16
+ <th>社員番号</th>
17
+ <th>社員名</th>
18
+ </tr>
19
+ </thead>
20
+ <tbody>
21
+ <tr>
22
+ <td><input type="checkbox" name="chk1"></td>
23
+ <th>0001</th>
24
+ <th>AAAA</th>
25
+ <tr>
26
+ <tr>
27
+ <td><input type="checkbox" name="chk1"></td>
28
+ <th>0002</th>
29
+ <th>BBBB</th>
30
+ <tr>
31
+ <tr>
32
+ <td><input type="checkbox" name="chk1"></td>
33
+ <th>0003</th>
34
+ <th>CCCC</th>
35
+ <tr>
36
+ </tbody>
37
+ ```
38
+ となっております。
39
+ 表示の処理は
40
+ ```javascript
41
+ for(i=0; i<a_tr_items.length; i++){
42
+ if(i<(list_num)){
43
+ tr_items[i].style.display = 'table-row';
44
+ } else {
45
+ tr_items[i].style.display = 'none';
46
+ }
47
+ }
48
+ ```
49
+ でやっております。
50
+ list_numには何件表示するかの値が入っております。

1

JSを修正

2018/12/17 11:54

投稿

limitman80
limitman80

スコア40

title CHANGED
File without changes
body CHANGED
@@ -1,15 +1,9 @@
1
1
  今以下の方法でCheckBoxの全選択、全解除を実現しています。
2
2
  ```javascript
3
- $(checkBox).on( 'change', function(e) {
3
+ $( checkAll ).on('click', function(e) {
4
- var boxCount = $( checkBox ).length; //全チェックボックスの数を取得
5
- var checked = $( checkBox + ':checked' ).length; //チェックされているチェックボックスの数を取得
6
-
7
- if( checked === boxCount ) {
8
- $( checkAll ).prop( 'checked', true );
9
- } else {
10
- $( checkAll ).prop( 'checked', false );
4
+ //$( checkBox ).prop('checked', this.checked );
11
- }
5
+ $(checkBox).prop('checked', $(this).prop('checked')).trigger('change');
12
- });
6
+ });
13
7
  ```
14
8
  今Tableは100行分最初に用意しておき、必要に応じて10行だったり20行だったりを表示しています。
15
9
  しかし上記の方法では画面に見えてない残りの90行分もチェックボックスがONされてしまいます。