[HTML/ CSS/ JS] input checkbox 다루기

-input type 종류

1. input type="text"

2. input type="password"

3. input type="submit"

4. input type="radio"

5. input type="checkbox"

6. input type="button"

7. input type="number"

8. input type="date"

9. input type="color"

10. input type="range"

11. input type="email"

 

-checkbox에 click시 영역 숨기기

1. 최종 결과

(좌)숨기기 전 (우) 숨기기 후

 

2. HTML

  <input id="hide" type="checkbox">
  <label for="hide">숨기기</label>
  <table>
    <tr>
      <td>hide</td>
      <td>show</td>
      <td>show</td>
    </tr>
    <tr>
      <td>hide</td>
      <td>show</td>
      <td>show</td>
    </tr>
  </table>

<input id="hide" type="checkbox">

<label for="hide"> 숨기기 </label>

input 타입을 checkbox로 설정하고 label의 for속성을 input의 id값과 같게 한다.

그러면 사용자가 label을 클릭해도 checkbox에 check 된다.

 

3. CSS

table{
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
}

tr,
td{
  background: lightgrey;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

border-collapse: collapse

tr태그와 td태그에 border값을 줄 경우 테두리가 한 줄이 아닌 두줄로 표시된다.

table에 border-collapse: collapse를 주면 tr의 border와 td border이 한 줄로 합쳐진다.

 

4. Javascript

const hideCheckBtn = document.querySelector('#hide');
const hideArea = document.querySelectorAll('table tr td:nth-child(1)');

hideCheckBtn.addEventListener('click',function(){
  for(let i = 0; i < hideArea.length; i++){
    if(hideCheckBtn.checked === false){   
      hideArea[i].style.opacity = 1;
    }else{
      hideArea[i].style.opacity = 0;
    }
  }
})

hideCheckBtn.addEventListener('click', function(){ }

checkbox를 클릭했을 때 td영역을 숨기기 위해 click 이벤트를 지정한다.

 

const hideArea = document.querySelectorAll('table tr td:nth-child(1)')

querySelectorAll로 table 안에 tr 안에 첫 번째 td들만 잡는다.

이렇게 되면 유사 배열로 첫 번째 td들이 담긴다.

console.log을 찍었을 때 NodeList(2) [td, td] 출력된다.

 

for(let i = 0; i < hideArea.length; i++){ }

td값들이 유사 배열로 잡혀있으니 반복문을 사용하여 한 개씩 원하는 이벤트를 적용한다.

 

if(hideCheckBtn.checked === false){ 

  hideArea [i]. style.opacity = 1;

} else {

  hideArea [i]. style.opacity = 0;

}

console.log에 checkbox(hideCheckBtn). checked를 찍어보면 check가 안된 경우에는 false를 출력하고

check가 된 경우에는 true를 출력한다.

check가 안된 경우에 false기 때문에 숨길 td영역의 opacity를 1로 지정하고 

check가 된 경우에는 true기 때문에 숨길 td영역의 opacity를 0으로 지정한다.