반응형
체크박스 하나라도 해제 시 전체 체크박스 해제 스크립트입니다.
$(document).ready(function(){
$("input[type=checkbox]").on("click",function(){ //체크박스가 클릭될 때
if($(this).attr("id") == "chkAll"){ //전체 체크인 경우
if($(this).is(":checked")){ //전체 체크가 체크되었을 경우
$("input[type=checkbox]").each(function(){ //체크박스 전체 검사
if($(this).attr("id") == "chkAll"){
return true; //전체 체크 일 경우 continue
}
$(this).prop("checked",true); //전체 체크가 아닐 경우 체크
})
}else{ //전체 체크가 체크 해제되었을 경우
$("input[type=checkbox]").each(function(){ //체크박스 전체 검사
if($(this).attr("id") == "chkAll"){
return true; //전체 체크 일 경우 continue
}
$(this).prop("checked",false);
//전체 체크가 아닐 경우 체크 해제
})
}
}else{ //전체 체크가 아닌 경우
var chkCnt = 0; //체크된 체크박스 수
var allCnt = 0; //전체 체크박스 수
$("input[type=checkbox]").each(function(){ //체크박스 전체 검사
if($(this).attr("id") == "chkAll"){
return true; //전체 체크 일 경우 continue
}
allCnt++; //전체 체크가 아닐 경우 전체 체크박스 수 증가
if($(this).is(":checked")){
//현재 검사 중인 체크박스가 체크되어 있을 경우
chkCnt++; //전체 체크박스 수 증가
}
});
if(chkCnt == allCnt ){
//전체 체크박스 수와 체크된 체크박스 수가 같을경우
$("#chkAll").prop("checked",true); //전체 체크박스 체크
}else{
$("#chkAll").prop("checked",false); //전체 체크박스 체크 해제
}
}
});
});
<input type="checkbox" id="chkAll"/> <!--전체 체크 체크박스에 id값 설정-->
반응형
'Web Spring 전정프' 카테고리의 다른 글
이클립스 eclipse 자바스크립트 복사 렉 해결 (0) | 2020.11.23 |
---|---|
Access-Control-Allow-Origin 문제 해결 방법 (0) | 2020.11.20 |
전자정부 프레임워크 전정프 spring 리스트 최대 개수 늘리기 (0) | 2020.11.19 |
ckeditor ck에디터 잘못된 서버 응답 오류 해결 방법 (0) | 2020.11.18 |
Eclipse 이클립스 maven 메이븐 충돌 conflict (0) | 2020.11.16 |