JS 연습문제 10 - 체크박스 실습

• JS 연습문제 10 -  체크박스 실습
• CSS

#result{
   height: 200px;
   border: 2px solid red;
}

• HTML

<fieldset>
        <legend>취미</legend>
        <table>
            <tr>
                <td><label><input type="checkbox" id="all"> 전체선택</label></td>
                <td><label><input type="checkbox" name="hobby" value="종합"> 종합</label></td>
                <td><label><input type="checkbox" name="hobby" value="소설"> 소설</label></td>
                <td><label><input type="checkbox" name="hobby" value="시/에세이"> 시/에세이</label></td>
                <td><label><input type="checkbox" name="hobby" value="경제/경영"> 경제/경영</label></td>
                <td><label><input type="checkbox" name="hobby" value="자기계발"> 자기계발</label></td>
                <td><label><input type="checkbox" name="hobby" value="아동"> 아동</label></td>
            </tr>
            <tr>
                <td></td>
                <td><label><input type="checkbox" name="hobby" value="여행"> 여행</label></td>
                <td><label><input type="checkbox" name="hobby" value="과학"> 과학</label></td>
                <td><label><input type="checkbox" name="hobby" value="역사/문화"> 역사/문화</label></td>
                <td><label><input type="checkbox" name="hobby" value="외국어"> 외국어</label></td>
                <td><label><input type="checkbox" name="hobby" value="컴퓨터"> 컴퓨터</label></td>
                <td><label><input type="checkbox" name="hobby" value="만화"> 만화</label></td>
            </tr>
        </table>
</fieldset>

<button id="category">카테고리 선택</button>
<div id="result"></div>

• JavaScript

const all = document.getElementById('all'); // 전체 선택 체크박스

const hobbyList = document.getElementsByName('hobby'); // 취미 체크박스

const result = document.getElementById('result'); // 결과 div

const category = document.querySelector('#category') // 버튼
        
// 1) 전체선택 클릭 시 취미 체크박스를 전체 선택 체크박스로 값 변경
all.addEventListener('click', function(){

   for(let hobby of hobbyList){
     hobby.checked = all.checked;
   }
})

// 2) 개별 항목 체크 -> 카테고리 선택 출력
category.addEventListener('click', function(){

   for(let hobby of hobbyList){
     if(hobby.checked){
        document.getElementById('result').innerHTML += hobby.value + " ";
     }
   }
   
})

// 3) 취미 체크박스 클릭 시 전체선택 여부 확인
for(let hobby of hobbyList){
            
   hobby.addEventListener('click', function(){
                
   // 1) 취미가 전부 선택이 안 되어 있는 경우, 전체 선택 해제
      if(all.checked && !hobby.checked){
      // 전체 선택이 되어 있으면서 취미 체크박스가 해제되는 경우
         all.checked = false;
      }

   // 2) 취미가 전부 선택된 경우, 전체 선택 체크
      let flag = true;
      for(let j=0; j<hobbyList.length; j++){ // 취미가 전부 체크되었는지 확인하기 위한 for문
          if(!hobbyList[j].checked){ // 하나라도 체크가 안 되어 있는 경우
             flag = false;
          }
      }
   // 3) 전체선택 체크박스가 체크되어 있지 않으면서
   //    취미가 전부 선택되어있는 경우, 전체선택 체크하기
          if(!all.checked && flag){
             all.checked = true;
          }
   })
}

See the Pen 24-12-25 js review-pr10 by Namu (@Namu-the-sans) on CodePen.