今以下の方法でCheckBoxの全選択、全解除を実現しています。
javascript
1 $( checkAll ).on('click', function(e) { 2 //$( checkBox ).prop('checked', this.checked ); 3 $(checkBox).prop('checked', $(this).prop('checked')).trigger('change'); 4 });
今Tableは100行分最初に用意しておき、必要に応じて10行だったり20行だったりを表示しています。
しかし上記の方法では画面に見えてない残りの90行分もチェックボックスがONされてしまいます。
表示されている行のみチェックONさせる方法はないでしょうか?
html
1<table id=srctable> 2 <thead> 3 <tr> 4 <th><input type="checkbox" id="checkAll"></th> 5 <th>社員番号</th> 6 <th>社員名</th> 7 </tr> 8 </thead> 9 <tbody> 10 <tr> 11 <td><input type="checkbox" name="chk1"></td> 12 <th>0001</th> 13 <th>AAAA</th> 14 <tr> 15 <tr> 16 <td><input type="checkbox" name="chk1"></td> 17 <th>0002</th> 18 <th>BBBB</th> 19 <tr> 20 <tr> 21 <td><input type="checkbox" name="chk1"></td> 22 <th>0003</th> 23 <th>CCCC</th> 24 <tr> 25 </tbody>
となっております。
表示の処理は
javascript
1 for(i=0; i<a_tr_items.length; i++){ 2 if(i<(list_num)){ 3 tr_items[i].style.display = 'table-row'; 4 } else { 5 tr_items[i].style.display = 'none'; 6 } 7 }
でやっております。
list_numには何件表示するかの値が入っております。