[ JS ] input 여러개의 checked 값과 value값 가져오기

<table id="table">
  <tr>
    <td>나이:</td>

    <td>
      <label>
        <input type="radio" name="age" value="young" checked> 18세 미만
      </label>
      <label>
        <input type="radio" name="age" value="mature"> 18세 이상, 60세 미만
      </label>
      <label>
        <input type="radio" name="age" value="senior"> 60세 이상
      </label>
    </td>
  </tr>
</table>

<script>
  // getElementsByTagName -> 's'로 써야함! 주의!
  let inputs = table.getElementsByTagName('input');

  for (let input of inputs) {
    alert( input.value + ': ' + input.checked );
  }
</script>

※  getElementsByTagName를 써야 하는데 getElementByTagName으로 입력하면 안됨! 주의
-> getElementByTagName 사용시  Uncaught TypeError 발생!!!!

getElementById는 요소 하나만을 반환하기 때문에 s가 없습니다. getElementsByTagName 등의 메서드는 대응하는 요소를 담은 컬렉션을 반환하기 때문에 메서드 중간에 "s"가 들어갑니다.

 

초보자가 자주하는 실수 !  - > ( 여러번 경험했던 ..실수들이네요.. )

// 동작하지 않는 코드
document.getElementsByTagName('input').value = 5;

요소 하나가 아닌, 컬렉션을 반환!

input 요소 전체를 담은 컬렉션에 5를 할당하는 위 코드는 동작하지 않습니다.

컬렉션을 순회하거나 인덱스를 사용해 요소를 얻고 그 요소에 값을 할당하면 기존 의도대로 동작합니다.

// (문서에 input 요소가 있다면) 아래 코드는 잘 동작합니다.
document.getElementsByTagName('input')[0].value = 5;

 

 

getElement*, querySelector*로 요소 검색하기