목록의 체크 선택/해제에 따라 [전체선택] 체크박스를 체크하거나 해제하기
동적으로 생성된 목록에서
체크박스를 모두 선택하면 --> 목록 상단의 [전체선택/해제] 체크박스를 체크하고
체크박스를 하나라도 해제하면 --> 목록 상단의 [전체선택/해제] 체크박스를 체크해제
HTML 부분
아래의 HTML 코드 중 주석 부분을 jQuery로 동적 생성시 제어가 당초 생각했던 코드대로 실행되지 않았다
그래서 동적 생성 HTML일 경우 아래처럼 처리해 보았다
<table id="table-03" class="table table-responsive table-grtc-01 no-margin has-check" summary="사진정보 이력">
<thead>
<tr class="text-center-group vertical-middle-group">
<th>
<div class="checkbox">
<input type="checkbox" value="" aria-label="check" title="check" class="cursor-pointer">
<label></label>
</div>
</th>
<th>촬영일자</th>
<th>촬영기관</th>
<th>사진설명</th>
</tr>
</thead>
<tbody>
<!--
<tr class="vertical-middle-group">
<td class="text-center-group">
<div class="checkbox">
<input type="checkbox" value="option1" aria-label="check" title="check" class="cursor-pointer">
<label></label>
</div>
</td>
<td class="text-center">2016/05/16</td>
<td class="tooltip-demo txt-ellipsis-td">
<span data-toggle="tooltip" data-placement="top" title="김해시">김해시</span>
</td>
<td class="tooltip-demo txt-ellipsis-td">
<span data-toggle="tooltip" data-placement="top" title="20160415_sample.jpg">20160415_sample.jpg</span>
</td>
</tr> -->
</tbody>
</table>
jQuery 부분
//$('input[name="tpiSeqs"]').click(function(){ //동적 생성된 HTML에서는 작동 안됨
$(document).on('click', 'input[name="tpiSeqs"]', function(){ //동적 생성된 HTML에서도 작동됨
//var totLength = $(this).length; //이건 항상 1이 나왔음
var totLength = $('input[name="tpiSeqs"]').length; //이건 예상했던 개수가 나옴
var chkLength = $('input[name="tpiSeqs"]:checked').length;
if (totLength > 0 && totLength == chkLength) {
console.log("on:");
$('#table-03 thead input:checkbox').prop("checked",true);
} else {
console.log("off");
$('#table-03 thead input:checkbox').prop("checked",false);
}
});