반응형
모두선택이라는 체크박스를 클릭하면 해당 체크박스가 모두 선택되고, 다시 클릭하면 모두 해제되는 기능입니다.
체크박스 중 하나라도 체크가 되어있지 않다면 모두선택 체크박스는 해제됩니다. 아래는 그 예시입니다.
<script>
$(document).ready(function() {
// 모두선택 클릭 시
$("input:checkbox[name='checkAll']").click(function() {
if($("input:checkbox[name='checkAll']").is(":checked") == true) {
$("input:checkbox[name='chk']").prop("checked", true);
} else {
$("input:checkbox[name='chk']").prop("checked", false);
}
});
// 체크박스 클릭 시
$("input:checkbox[name='chk']").click(function() {
var allCnt = $("input:checkbox[name='chk']").length; // chk 전체갯수
var selCnt = $("inupt:checkbox[name='chk']:checked").length; // chk 선택갯수
if(allCnt != selCnt) {
$("input:checkbox[name='chkAll']").prop("checked", false);
}
});
});
</script>
<body>
<label><input type="checkbox" name="checkAll">모두선택</label>
<label><input type="checkbox" id="chk1" name="chk">체크박스1</label>
<label><input type="checkbox" id="chk2" name="chk">체크박스2</label>
<label><input type="checkbox" id="chk3" name="chk">체크박스3</label>
<label><input type="checkbox" id="chk4" name="chk">체크박스4</label>
</body>728x90
반응형
'프로그래밍 > JavaScript' 카테고리의 다른 글
| ( 자바스크립트) 윈도우 팝업 생성 (0) | 2021.01.25 |
|---|---|
| (자바스크립트) 쿠키(Cookie) 생성, 삭제, 가져오기 예제 (0) | 2021.01.25 |
| (자바스크립트) 키코드 키보드이벤트 모음 및 예시 (0) | 2021.01.25 |
| (자바스크립트) 로그인페이지 - 엔터로 로그인하기 (0) | 2021.01.25 |
| (자바스크립트) 파일업로드 - 파일크기 체크 (0) | 2021.01.25 |