[JQuery] CheckBox 전체 선택 하기과 해제
- Web / JavaScript
- 2022. 4. 19.
준비 과정 - HTML 활용하기
<div id="check_all">
<label for="chk_select_00">
<input type="checkbox" name="chk_area" id="chk_select_00" value="00" > 전체
</label>
<label for="chk_select_01">
<input type="checkbox" name="chk_area" id="chk_select_01" value="01" > 체크
</label>
<label for="chk_select_02">
<input type="checkbox" name="chk_area" id="chk_select_02" value="02" > test
</label>
</div>
checkbox의 전체선택하는 방법은 의외로 간단하다.
checkbox를 묶는 상위 테그를 생성하면 쉽게 만들 수 있다.
여기서는 알기 쉽게 div 테그를 생성하였고 check_all이라는 명칭을 주었다.
전체 선택 만들기
<body>
<h3>체크박스 </h3>
<div id="check_all">
<label for="chk_select_00">
<input type="checkbox" name="chk_area" id="chk_select_00" value="00" > 전체
</label>
<label for="chk_select_01">
<input type="checkbox" name="chk_area" id="chk_select_01" value="01" > 체크
</label>
<label for="chk_select_02">
<input type="checkbox" name="chk_area" id="chk_select_02" value="02" > test
</label>
</div>
<script src="js/jquery.3.6.0.min.js"></script>
<script src="js/ui.js"></script>
<script>
$('#chk_select_00').click(function() {
$('#chk_select_00').parents('#check_all').find('input').prop('checked', true);
})
</script>
</body>전체checkbox를 클릭할 경우, 나머지 checkbox도 모두 체크된다.
Jquery의 Click을 활용하여, 전체 채크 할 수 있도록 만들었다.
그러나 여기서, CheckBox는 click으로 할 경우 문제가 발생한다. checkBox를 click으로만 받을 경우, true와 false의 구분이 한 박자 느린 결과를 보여준다.
따라서 checkBox는 change를 사용하는 것이 더 명확하다.
전체 선택 체크하기 마무리
<body>
<h3>체크박스 </h3>
<div id="check_all">
<label for="chk_select_00">
<input type="checkbox" name="chk_area" id="chk_select_00" value="00" > 전체
</label>
<label for="chk_select_01">
<input type="checkbox" name="chk_area" id="chk_select_01" value="01" > 체크
</label>
<label for="chk_select_02">
<input type="checkbox" name="chk_area" id="chk_select_02" value="02" > test
</label>
</div>
<script src="js/jquery.3.6.0.min.js"></script>
<script src="js/ui.js"></script>
<script>
$('input[name="chk_area"]').change(function() {
//전체 클릭은 value가 00이다. checkbox true 여부 확인하다.
if($(this).is(':checked', true) && $(this).val() == '00') {
$(this).parents('#check_all').find('input').prop('checked', true);
} else if($(this).val() == '00'){
$(this).parents('#check_all').find('input').prop('checked', false);
}
})
</script>
</body>이제 블로그 작성을 위해서 checkBox를 응용하는 간단한 동작문구를 작성하였다.
name을 통해서, checkBox의 Event처리를 실행하며, checkBox의 결과값을 통해 '전체'인지 아닌지를 구분한다.
여기서 구분값의 기준은 value의 값이 '00'이다.
코드의 활용을 좀 더 간결하게 하기 위해서 this를 활용하였다.
코드는 정상적으로 전체 선택과 해제가 동작된다.
전체 선택과 해제는 생각보다 쉽게 끝났다.
그러나 사용자가 편할수록 개발자가 힘들다는 말이 맞는지, 좀 더 세심한 기능을 하다보니 너무 힘들다.
이 글을 작성하는 이유는, 전체 선택을 위해 FOR문을 돌리는 일이 없기를 바라며...
반응형
'Web > JavaScript' 카테고리의 다른 글
| [JavaScript, Jquery] Jquery 라이브러리 설치하기 (0) | 2022.09.08 |
|---|---|
| [JavaScript] GibberishAES 암호화 (0) | 2022.05.04 |
| [JavaScript] 배열 추가하기, 삭제하기 (0) | 2022.04.19 |
| [JavaScript] JavaScript 활용하기 - 기초(3) (0) | 2022.01.29 |
| [JavaScript] JavaScript의 변수 - 기초(2) (0) | 2022.01.29 |
