See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen.
이번에는 자바스크립트만을 이용하여 체크박스를 간편하게 전체 선택 또는 해제 하는 방법에 대해 알아보았다.
첫번째 이벤트로, 체크박스 전체 선택 및 전체 해제에 대한 방법을,
두번째 이벤트로, 내용부에 있는 체크박스에 따라 제목줄 체크박스 체크 여부 변경에 대해서 자세히 기술해보려고한다.
위와 같이 HTML을 짜주고, body 태그가 끝나기 전에 js를 연결시켜준다.
첫번째 이벤트
체크 박스 전체 선택 및 전체 해제 기능을 해볼 것이다.
일단 제목줄에 있는 체크 박스를 선택해서 가져와야 한다. 나는 id태그에 checkAll을 주어 js로 가지고 왔다.
이후 체크박스 클릭시 실행되는 이벤트를 추가해줄 것이다.
checkAll에 아이디를 주었으니, 이 체크박스를 클릭하면 function()안에 있는 함수들이 실행될 것이다.
html의 input type checkbox에 checked 라는 기본적으로 체크 표시를 하라는 속성이 있다.
이것을 아래와 같이 isChecked 라는 변수로 만들어준다.
이후 if문을 돌려 isChecked의 값이 True라면 내용부에 class로 지정했던 chk의 값이 모두 True 될 수 있도록 만들 것이다.
이와 같이 코드를 만들어주면 위 제목줄의 체크박스를 클릭하면 내용부의 모든 체크박스도 checked가 된다.
반대로 체크 해제를 하면 내용부의 모든 체크박스는 체크가 해제된다.
두번째 이벤트
내용부의 체크박스에 따라 제목줄 체크 박스 체크 여부를 변경해볼 것이다.
만약 하나라도 체크가 안되있다면 제목 줄 체크 박스는 체크가 안될 것이고,
모두 체크 혹은 해제 되있다면 제목줄도 똑같이 체크 혹은 해제될 것이다.
일단 내용부에 있는 체크박스들을 선택해주어야한다.
그리고 for문을 이용해 모든 체크박스에 각각 이벤트를 추가해주자.
const로 생성한 checkboxes 라는 변수를 사용해 checkbox 라는 이름으로 반복시킨다.
그리고 checkbox를 클릭할 때 마다 이벤트가 발생되는 함수를 아래에 만들어준다.
전체 체크 박스의 개수를 totalCnt 라는 변수에 저장하고,
체크가 된 체크박스의 개수도 checkCnt 라는 변수를 만들어 저장시킨다.
이후 만약 전체 체크박스의 개수가 체크가 된 체크박스 개수와 같으면!
제목줄에 있는 check박스 id #checkAll을 true로 주고, 개수가 다르면 false를 주는 if else를 사용할 수 있다.
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <table border="1"> <tr> <td colspan="3"><input type="checkbox" id="checkAll">전체 선택</td> </tr> <tr> <td> <input type="checkbox" class ="chk"> Option 1<br></td> <td> <input type="checkbox" class ="chk"> Option 2<br></td> <td> <input type="checkbox" class ="chk"> Option 3<br></td> </tr> </table> <script type="text/javascript" src="check.js"></script> </body> </html> | cs |
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | document.querySelector('#checkAll'); checkAll.addEventListener('click', function(){ const isChecked = checkAll.checked; if(isChecked){ const checkboxes = document.querySelectorAll('.chk'); for(const checkbox of checkboxes){ checkbox.checked = true; } } else{ const checkboxes = document.querySelectorAll('.chk'); for(const checkbox of checkboxes){ checkbox.checked = false; } } }) //////////////////////////////////////////////////////////// const checkboxes = document.querySelectorAll('.chk'); for(const checkbox of checkboxes){ checkbox.addEventListener('click',function(){ const totalCnt = checkboxes.length; const checkedCnt = document.querySelectorAll('.chk:checked').length; if(totalCnt == checkedCnt){ document.querySelector('#checkAll').checked = true; } else{ document.querySelector('#checkAll').checked = false; } }); } | cs |
'✨ Front-end > 자바스크립트(JS)' 카테고리의 다른 글
| [JavaScript] 자바스크립트 문제해결 시나리오 (0) | 2023.05.04 |
|---|---|
| [Javascript - Ajax] 동기(Synchronous)와 비동기(Asynchronous) (0) | 2023.03.27 |
| [JavaScript] var, let, const의 변수 선언 방식과 각각의 차이 (0) | 2023.03.03 |
| [JavaScript] 배열(Array)과 객체(Object) 차이, innerHTML 사용법 (0) | 2023.02.25 |
| [JavaScript] 상품 리스트 만들어보기 (0) | 2023.02.20 |
댓글