[책] 자바스크립트 코드 레시피 278 - 151일차

라디오 버튼 상태 변경 확인하기

• 라디오 버튼 상태 변경 시 작업을 처리하고 싶을 때

구문

change

설명

라디오 버튼 상태의 변경은 change 이벤트로 감시할 수 있습니다. addEventListener()를 사용해 이벤트 핸들러를 설정합니다. 이벤트 핸들러 내부 함수는 앞서 기술한 라디오 버튼 상태 읽어 오기 방법을 사용합니다.

실습

index.html

<form id="radioGroup">
  <!-- 첫 번째 라디오 버튼 그룹 -->
  <label>
    <input type="radio" name="fruit" value="apple" checked>apple
  </label>
  <label>
    <input type="radio" name="fruit" value="orange" checked>orange
  </label>
  <label>
    <input type="radio" name="fruit" value="grape" checked>grape
  </label>
  <!-- 두 번째 라디오 버튼 그룹 -->
  <label>
    <input type="radio" name="drink" value="coke" checked>coke
  </label>
  <label>
    <input type="radio" name="drink" value="wine" checked>wine
  </label>
  <label>
    <input type="radio" name="drink" value="tea" checked>tea
  </label>
</form>

---

script.js

const element = document.querySelector('#radioGroup');
element.addEventListener('change', handleChange);
function handleChange() {
  const drinkValue = element.drink.value;
  const fruitValue = element.fruit.value;
  console.log(`drinkValue의 값은 ${drinkValue} 입니다.`);
  console.log(`fruitValue의 값은 ${fruitValue} 입니다.`);
}