어제 오늘 내일

[Javascript] 체크박스에 체크된 항목 개수 구하기 본문

IT/Javascript

[Javascript] 체크박스에 체크된 항목 개수 구하기

hi.anna 2020. 11. 15. 01:08

 

체크박스를 클릭하여 선택할 때마다,

총 몇개가 선택되었는지, 체크된 항목의 개수를 구하는 예제입니다.

 

체크박스에 체크된 항목 개수 구하기

<input type='checkbox'
       name='animal' 
       value='dog'
       onclick='getCheckedCnt()'/> 개
<input type='checkbox' 
       name='animal' 
       value='cat' 
       onclick='getCheckedCnt()'/> 고양이
<input type='checkbox' 
       name='animal' 
       value='rabbit' 
       onclick='getCheckedCnt()'/> 토끼

<div id='result'></div>
function getCheckedCnt()  {
  // 선택된 목록 가져오기
  const query = 'input[name="animal"]:checked';
  const selectedElements = 
      document.querySelectorAll(query);
  
  // 선택된 목록의 갯수 세기
  const selectedElementsCnt =
        selectedElements.length;
  
  // 출력
  document.getElementById('result').innerText
    = selectedElementsCnt;
}

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

 <HTML> 

'name="animal"'인 체크박스 3개를 만들었습니다.

그리고, 체크박스를 선택할 때마다, 선택된 체크박스의 갯수를 세기 위해

체크박스 각각에 onclick 이벤트를 주고,

'getCheckedCnt()' 함수를 호출하였습니다.

 

 <JS> 

선택된 목록 가져오기

선택된 전체 체크박스 element를 찾기 위해서

document.querySelectorAll(query) 함수를 사용하였습니다.

이 함수는 document 전체에서 query 조건에 맞는 모든 element를 찾아서

NodeList 형태로 리턴해 줍니다.

여기서는 query를

'input[name="animal"]:checked' 

이렇게 주었는데

전체 <input> 중 name 속성값이 'animal'이고, checked가 true인 element를

모두 찾아오라는 의미입니다.

따라서, 위 코드의 'selectedElements' 변수는

name='animal'인 선택된 체크박스 element 목록을 가지게 됩니다.

 

선택된 목록의 갯수 세기

체크박스에 체크된 항목의 갯수를 구하기 위해서는

'selectedElements' 변수에 담긴 목록의 길이를 구하면 됩니다.

 

출력

결과를 화면에 출력하였습니다.

 

 

querySelectorAll() 함수를 이용하여

체크박스에 체크된 항목의 갯수를 구하는 방법을 알아보았습니다.

 

 

반응형

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

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