[jQuery] 전체 체크박스 체크

테이블의 th의 체크박스 선택 시 tbody의 td의 checkbox를 전체 체크하는 간단한 예제다.

<table>
    <thead>
        <tr>
            <th scope="col" class="bg-sky">
                <span class="chk checkbox">
                    <input type="checkbox" id="chkall" onclick="fn_chkAll(this)">
                    <label for="chkall" class="chk-label"></label>
                </span>
            </th>
            <th scope="col" class="bg-sky" style="font-weight:bold;">번호</th>
            <th scope="col" class="bg-sky" style="font-weight:bold;">성명</th>
            <th scope="col" class="bg-sky" style="font-weight:bold;">아이디</th>
        </tr>
    </thead>
    <tbody id="targetBody">
        <c:forEach items="${resultList}" var="resultInfo" varStatus="status">
        <tr>
            <td><input type="checkbox" id="checkbox"></td>
            <td id="rowNum"><c:out value="${(searchVO.pageIndex-1) * searchVO.pageUnit + status.count}"/></td>
            <td id="name"><c:out value='${resultInfo.name}'/></td>
            <td id="userId"><c:out value='${resultInfo.userId}'/></td>
        </tr>
        </c:forEach>
    </tbody>
</table>

function fn_chkAll(obj){
	if($(obj).is(':checked')){
		$('#targetBody').find('input:checkbox[id^=checkbox]').prop('checked', true);
	}else{
		$('#targetBody').find('input:checkbox[id^=checkbox]').prop('checked', false);
	}
}