어제 오늘 내일

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

IT/Javascript

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

hi.anna 2020. 11. 22. 23:41

 

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

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

 

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

체크박스 전체 선택/전체 해제 구현하는 2가지 방법을 소개합니다. 1. Document.getElementsByName() 활용하기 2. Document.querySelectorAll() 활용하기 1. Document.getElementsByName() 활용하기 Select All..

hianna.tistory.com

그런데, 이전 포스팅의 예제에서는

전체 선택 후, 개별 항목을 선택 해제하여도

전체 선택 항목의 체크박스가 자동으로 선택 해제 되지 않습니다.

이번에는, 개별 항목 중 하나라도 선택 해제 된 항목이 있을 경우,

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

 

 

1. 전체 체크박스 항목 갯수와 선택된 체크박스 항목 갯수 비교
2. 개별 체크박스 항목이 선택 해제 될때, '전체선택' 항목 선택 해제 하기

 

1. 전체 체크박스 항목 갯수와 선택된 체크박스 항목 갯수 비교

아래 예제는,

selectall 체크박스를 선택하면, animal 체크박스가 모두 선택되고,

selectall 체크박스를 선택해제 하면, animal 체크박스가 모두 선택해제 됩니다.

 

또한,

animal 체크박스를 하나하나 클릭하여 전체를 선택하면, selectall 체크박스가 선택되고,

selectall 체크박스를 선택하여 전체선택을 한 경우, animal 체크박스가 하나라도 선택해제 되면,

selectall 체크박스 역시 선택해제 됩니다.

<input type='checkbox'
       name='selectall' 
       value='selectall'
       onclick='selectAll(this)'/> <b>Select All</b>
<br />
<input type='checkbox'
       name='animal' 
       value='dog'
       onclick='checkSelectAll()'/> 개
<br />
<input type='checkbox' 
       name='animal' 
       value='cat' 
       onclick='checkSelectAll()'/> 고양이
<br />
<input type='checkbox' 
       name='animal' 
       value='rabbit' 
       onclick='checkSelectAll()'/> 토끼
function checkSelectAll()  {
  // 전체 체크박스
  const checkboxes 
    = document.querySelectorAll('input[name="animal"]');
  // 선택된 체크박스
  const checked 
    = document.querySelectorAll('input[name="animal"]:checked');
  // select all 체크박스
  const selectAll 
    = document.querySelector('input[name="selectall"]');
  
  if(checkboxes.length === checked.length)  {
    selectAll.checked = true;
  }else {
    selectAll.checked = false;
  }

}

function selectAll(selectAll)  {
  const checkboxes 
     = document.getElementsByName('animal');
  
  checkboxes.forEach((checkbox) => {
    checkbox.checked = selectAll.checked
  })
}

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

 

위 예제는,

전체 체크박스의 갯수와 선택된 체크박스의 갯수를 비교하여

selectall 체크박스를 자동으로 선택/선택해제 합니다.

 

 

 <HTML> 

name='selectall' 인 체크박스 1개와 name='animal'인 3개의 체크박스가 있습니다.

name='animal'인 체크박스에 onclick 이벤트가 발생하면 checkSelectAll() 함수가 실행됩니다.

 

 <JS> 

function checkSelectAll(checkbox) { ... }

animal 체크박스에 onclick 이벤트가 발생할 때마다

전체 체크박스(checkboxes)와 선택된 체크박스(checked)의 갯수를 비교하여

갯수가 같으면 selectall 체크박스가 선택되도록 하고,

갯수가 같지 않으면 selectall 체크박스(selectAll)가 선택해제 되도록 하고 있습니다.

 

function selectAll(selectAll) { ... }

이 함수에 대한 자세한 설명은, 지난 포스팅을 참조하세요.

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

 

 

2. 개별 체크박스 항목이 선택 해제 될때, '전체선택' 항목 선택 해제 하기

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

function selectAll(selectAll)  {
  const checkboxes 
     = document.getElementsByName('animal');
  
  checkboxes.forEach((checkbox) => {
    checkbox.checked = selectAll.checked
  })
}

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

 

 <HTML> 

animal 체크박스에 onclick 이벤트가 발생할 때마다 checkSelectAll() 함수를 호출합니다.

이번에는 파라미터로 이벤트가 발생한 this element 객체를 전달합니다.

 

 <JS> 

function checkSelectAll(checkbox) { ... }

파라미터로 전달 받은, 체크박스 element의 checked 값이 false인 경우,

즉, 하나라도 체크박스의 선택이 해제 된 경우,

selectall 체크박스의 checked 값을 false로 변경하여, 선택해제 되도록 하고 있습니다.

 

function selectAll(selectAll) { ... }

이 함수에 대한 자세한 설명은, 지난 포스팅을 참조하세요.

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

 

 1번 예제와의 차이점 

1번 예제의 경우 사용자가 animal 체크박스 항목을 각각 클릭하여 전체를 선택하면

selectall 체크박스 항목도 자동으로 선택됩니다.

그러나, 2번 예제는

사용자가 animal 체크박스를 모두 선택하여도 selectall 체크박스 항목이 자동 선택되지 않습니다.

2번 예제는 오직 전체선택된 상태에서 하나라도 선택이 해제 되었을 경우에만

selectall 체크박스 항목을 선택해제 합니다.

 

 

 

체크박스 중 하나라도 선택 해제된 경우,

자동으로 전체선택 항목을 선택해제 시키는 방법을 알아보았습니다.

 

 

반응형

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

[Javascript] input 에서 입력 글자수 제한하는 2가지 방법  (2) 2020.11.27
[Javascript] 체크박스 하나만 선택되도록 하기  (1) 2020.11.25
[Javascript] 체크박스 전체 선택 / 전체 해제 구현하기  (2) 2020.11.22
[Javascript] 체크박스에 체크된 항목 개수 구하기  (0) 2020.11.15
[Javascript] 체크박스(checkbox)에 선택 된 값 출력하기  (5) 2020.11.14
공유하기 링크
'IT/Javascript' Related Articles more
Comments