[JavaScript] 체크박스 전체 선택 - Sample[JavaScript] 체크박스 전체 선택 - Sample
Posted at 2019. 12. 19. 11:34 | Posted in JavaScript & jQuery/JavaScript■ 전체영역을 선택하는 체크박스 샘플 코드
# 소스코드
<html> <head> <title>:: JavaScript 체크박스 ::</title> <script type="text/javascript"> // @command 전체선택 function allCheckedBox(obj) { // @brief 선택한 체크박스의 클래스 명칭을 가져온다. const termClass = obj.getAttribute("class"); // @brief 선택한 클래스명과 같은 클래스의 갯수 console.log(document.getElementsByClassName(termClass).length); Array.prototype.forEach.call(document.getElementsByClassName(termClass), function(element, index, array) { // @brief 엘리먼트의 값 출력 console.log(element.value); // @brief 선택한 클래스의 첫번째 checkbox의 상태가 체크가 되있는 경우 if(document.getElementsByClassName(termClass)[0].checked == true) { // @brief 같은 클래스명을 가진 모든 checkbox의 상태를 선택 완료 처리 한다. element.checked = true; } // @brief 선택한 클래스의 첫번째 checkbox의 상태가 체크가 해제된 경우 else { // @brief 같은 클래스명을 가진 모든 checkbox의 상태를 선택 해제 처리 한다. element.checked = false; } }); } // @command 개별 선택이 이루어진 경우에 전체값 체크의 예외처리 function eachCheckedBox(obj) { // @brief 선택한 체크박스의 상태가 선택해제인 경우 if(obj.checked == false) { // @brief 선택한 체크박스의 클래스 명칭을 가져온다. const termClass = obj.getAttribute("class"); // @brief 첫번째 checkbox의 상태가 체크가 되어있는경우 if(document.getElementsByClassName(termClass)[0].checked == true) { // @brief 첫번째 checkbox의 상태를 체크해제한다. document.getElementsByClassName(termClass)[0].checked = false; } } } </script> </head> <body> <h1>■ 체크박스 전체 선택 - SAMPLE</h1> <!-- @brief 전체의 선택의 경우 반드시 index값이 0인 첫번째에 위치해야 한다. --> <label> <input type="checkbox" class="neHeros" value="" onChange="allCheckedBox(this);"/> 전체 </label> <!-- @brief 개별선택될 체크박스들 --> <label> <input type="checkbox" class="neHeros" value="D" onChange="eachCheckedBox(this);"/> 데몬헌터 </label> <label> <input type="checkbox" class="neHeros" value="W" onChange="eachCheckedBox(this);"/> 워든 </label> <label> <input type="checkbox" class="neHeros" value="K" onChange="eachCheckedBox(this);"/> 키퍼 오브 더 그루브 </label> <label> <input type="checkbox" class="neHeros" value="P" onChange="eachCheckedBox(this);"/> 프리시스 오브 더 문 </label> </body> </html> |
# 출력결과
'JavaScript & jQuery > JavaScript' 카테고리의 다른 글
| [JavaScript] INPUT TYPE FILE 썸네일 생성 (0) | 2020.01.16 |
|---|---|
| [JavaScript] 파일업로드시 용량 검사하기 (0) | 2019.12.26 |
| [JavaScript] 실시간 타이머(시계) 만들기 (2) | 2019.12.05 |
| [JavaScript] 전광판 효과 구현하기 (0) | 2019.12.05 |
| [JavaScript] AJAX 통신 정리 (0) | 2019.11.17 |
