{TIL} 210221

HTML

• checkbox는 선택 / 해제가 가능하지만, radio button은 (선택해제가) 불가능하다.

• 매번 헷갈렸던 input과 label 정리

  <input id="same" type="checkbox" value="value" name = "name"/>
  <label htmlFor="same"> LABEL of this year </label>
  

input의 id와 label의 for가 같아야한다(JSX에선 htmlFor)

 

 

Javascript

• checkbox에서 선택한 값을 자바스크립트에서 출력하기

 getCheckValue = () => {
        const query = 'input[name="name"]:checked'; 
        const selected = document.querySelectorAll(query);
        console.log(selected) // 

         selected.forEach((el) => {
             console.log(el.value)
        });
 }

selected 변수에 forEach를 해주는 이유는, selected는 raw한 상태의 input 태그가 배열로 return되기 때문이다.