목록의 체크 선택/해제에 따라 [전체선택] 체크박스를 체크하거나 해제하기

목록의 체크 선택/해제에 따라 [전체선택] 체크박스를 체크하거나 해제하기 

동적으로 생성된 목록에서
체크박스를 모두 선택하면 --> 목록 상단의 [전체선택/해제] 체크박스를 체크하고
체크박스를 하나라도 해제하면 --> 목록 상단의 [전체선택/해제] 체크박스를 체크해제
 

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);
    }
});