어제 오늘 내일

[Javascript] 체크박스 전체 선택 / 전체 해제 구현하기 본문

IT/Javascript

[Javascript] 체크박스 전체 선택 / 전체 해제 구현하기

hi.anna 2020. 11. 22. 22:32

 

체크박스 전체 선택/전체 해제 구현하는 2가지 방법을 소개합니다.

 

1. Document.getElementsByName() 활용하기
2. Document.querySelectorAll() 활용하기

 

 

1. Document.getElementsByName() 활용하기

<input type='checkbox'
       name='animal' 
       value='selectall'
       onclick='selectAll(this)'/> <b>Select All</b>
<br />
<input type='checkbox'
       name='animal' 
       value='dog'/> 개
<br />
<input type='checkbox' 
       name='animal' 
       value='cat' /> 고양이
<br />
<input type='checkbox' 
       name='animal' 
       value='rabbit' /> 토끼
function selectAll(selectAll)  {
  const checkboxes = document.getElementsByName('animal');
  
  checkboxes.forEach((checkbox) => {
    checkbox.checked = selectAll.checked;
  })
}

(HTML, JS 탭을 클릭하여 두 가지 코드를 모두 확인하세요.)


 <HTML> 

위 예제 코드는 'animal'이라는 이름을 가지는 체크박스가 4개 있습니다.

첫번째 체크박스인 'Select All'을 선택하면, 나머지 전체 체크박스가 자동 선택되고,

'Select All'의 선택이 해제되면, 나머지 전체 체크박스가 자동으로 선택 해제 되는 기능을 구현하고 있습니다.

 

'Select All' 체크박스에는 onclick 이벤트를 가지고 있습니다.

'Select All' 체크박스가 선택되거나 해제되면 onclick 이벤트가 발생하게 되는데

여기서는 이 때 'selectAll()' 함수를 호출하고, 파라미터로 this를 전달하고 있습니다.

여기서 this는 이벤트가 발생한 element, 즉, 'Select All' 체크박스입니다.

 

 <JS> 

const checkboxes = document.getElementsByName('animal');

document.getElementsByName 함수를 사용하여 

문서에서 name='animal'인 모든 element를 찾아서 NodeList 형태로 리턴하였습니다.

즉, 여기서는 name='animal'인 4개의 체크박스 element가 리턴되었습니다.

 

checkboxes.forEach((checkbox) => {
  checkbox.checked = selectAll.checked; 
})

이 목록을 forEach 반복문을 사용하여 순회하면서

각 체크박스의 checked 값을 'Select All' element의 check 값(selectAll.checked)과 동일하게 변경해 주었습니다.

이렇게 하면, 'Select All' 체크박스가 선택되면, 나머지 체크박스도 모두 선택되고,

'Select All' 체크박스가 선택 해제 되면, 나머지 체크박스도 모두 선택 해제 되게 됩니다.

 

 

 

2. Document.querySelectorAll() 활용하기

<input type='checkbox'
       name='animal' 
       value='selectall'
       onclick='selectAll(this)'/> <b>Select All</b>
<br />
<input type='checkbox'
       name='animal' 
       value='dog'/> 개
<br />
<input type='checkbox' 
       name='animal' 
       value='cat' /> 고양이
<br />
<input type='checkbox' 
       name='animal' 
       value='rabbit' /> 토끼
function selectAll(selectAll)  {
  const checkboxes 
     = document.querySelectorAll('input[type="checkbox"]');
  
  checkboxes.forEach((checkbox) => {
    checkbox.checked = selectAll.checked;
  })
}

(HTML, JS 탭을 클릭하여 두 가지 코드를 모두 확인하세요.)

 

 <HTML> 

이 전 예제와 같은 HTML 코드입니다.

 

 <JS> 

이 전 예제와 거의 동일한 코드입니다.

 

다른 점은 체크박스 element 목록을 가져올 때

document.querySelectorAll() 함수를 사용했다는 것입니다.

document.querySelectorAll() 함수는 파라미터로 지정한 특정 element 목록 전체를 가져옵니다.

파라미터로 지정된 'input[type="checkbox"]' 구문의 의미는

모든 input element 중 type='checkbox' 인 목록을 의미합니다.

 

 

 

 

Document.getElementsByName(), Document.querySelectorAll()를 사용하여

체크박스 전체선택(select all), 전체선택해제 하는 방법을 알아보았습니다.

 

다음 번에는 위의 코드에서

전체 선택(select all) 후, 항목 하나를 선택 해제 했을 때

select all 항목의 체크박스가 선택해제 되도록 하는 방법을 알아보도록 하겠습니다.

[Javascript] 체크박스 중, 하나라도 선택해제 될 경우 전체 선택 해제 하는 2가지 방법

 

[Javascript] 체크박스 중, 하나라도 선택해제 될 경우 전체 선택 해제 하는 2가지 방법

지난 번에는 체크박스 목록 전체 선택/전체 선택해제 하는 방법을 알아보았습니다. [Javascript] 체크박스 전체 선택 / 전체 해제 구현하기 [Javascript] 체크박스 전체 선택 / 전체 해제 구현하기 체크

hianna.tistory.com

 

 

 

반응형

'IT > Javascript' 카테고리의 다른 글

[Javascript] 체크박스 하나만 선택되도록 하기  (1) 2020.11.25
[Javascript] 체크박스 중, 하나라도 선택해제 될 경우 전체 선택 해제 하는 2가지 방법  (2) 2020.11.22
[Javascript] 체크박스에 체크된 항목 개수 구하기  (0) 2020.11.15
[Javascript] 체크박스(checkbox)에 선택 된 값 출력하기  (5) 2020.11.14
[Javascript] 라디오 버튼 클릭하여, 텍스트 값 출력하기  (0) 2020.11.14
공유하기 링크
'IT/Javascript' Related Articles more
Comments