[Javascript] 체크박스 초기화하기

 

체크박스 선택을 초기화하는 방법입니다.

 

 

체크박스 초기화 하기

<input type='button'
       name='initCheckboxBtn' 
       value='초기화'
       onclick='initCheckbox()'/>
<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 initCheckbox()  {
  
  // 초기화할 checkbox 선택
  const checkboxes 
       = document.getElementsByName('animal');
  
  // 체크박스 목록을 순회하며 checked 값을 초기화
  checkboxes.forEach((checkbox) => {
    checkbox.checked = false;
  })
}

 

위 예제는

체크박스를 몇 개 선택한 후, '초기화' 버튼을 클릭하면

선택된 체크박스가 초기화 됩니다.

 

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

초기화할 체크박스 목록을 선택합니다.

getElementsByName() 함수는,

이름으로 element를 찾아서 NodeList 타입의 Collection 객체를 리턴합니다.

 

 

checkboxes.forEach((checkbox) => {

   checkbox.checked = false;

});

forEach() 문을 사용하여 체크박스 목록을 순회합니다.

NodeList의 원소인 각각의 checkbox의 checked 값을 false로 설정합니다.

 

 

체크박스를 전체 선택하려면,

반대로

checked 값을 true로 바꾸어 주면 되겠죠?

 

 

---