자바스크립트 체크박스 전체선택 구현

1. Document.getElementsByName() 사용

See the Pen Untitled by 김현진 (@jbfiyipe-the-selector) on CodePen.

 

HTML

• 첫 번째 <input> 요소는 전체선택 체크박스 입니다. 이 체크박스를 클릭하면 checkAll 함수가 호출됩니다.
• <input> 요소들은 각각 감자, 고구마, 호박 이라는 이름의 체크박스입니다. 모두 name을 동일하게 설정했습니다.

JavaScript 함수 checkAll

• checkAll 함수는 전체 선택 체크박스의 상태를 기반으로 나머지 체크박스들을 선택하거나 선택 해제합니다.
• document.getElementsByName('ani') : 'name' 속성이 'ani'인 모든 체크박스 요소를 가져옵니다. 이 메서드는 NodeList를 반환합니다.
• forEach : NodeList의 각 체크박스에 대해 반복하면서 전체 선택 체크박스의 상태 checkAll.checked 에 맞게 체크 상태를 설정합니다.

 

---

 

2. Document.querySelectorAll() 사용

 

See the Pen Untitled by 김현진 (@jbfiyipe-the-selector) on CodePen.

 

 

HTML

• 첫 번째 <input> 요소는 전체선택 체크박스 입니다. 이 체크박스를 클릭하면 checkAll 함수가 호출됩니다.
• 나머지 <input> 요소들은 기본적인 체크박스입니다.

JavaScript 함수 checkAll

• document.querySelectorAll('input[type="checkbox"]') : 문서 내의 모든 체크박스 요소를 선택합니다. CSS 선택자 `input[type="checkbox"]` 를 사용하여 모든 체크박스 <input> 요소를 반환합니다. 반환된 결과는 NodeList 입니다.
• forEach : NodeList의 각 체크박스에 대해 반복하면서 전체 선택 체크박스의 상태 checkAll.checked 에 맞게 체크 상태를 설정합니다.