[JavaScript] 자바스크립트에서 라디오 버튼 상태 변경 확인하기

164_자바스크립트에서 라디오 버튼 상태 변경 확인하기

[적용]

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

---

[문법]

이벤트	의미
change	form 요소 변경 시 이벤트

---

[내용]

라디오 버튼 상태의 변경은 change 이벤트로 감시할 수 있다.

addEventListener()를 사용해 이벤트 핸들러를 설정한다.

이벤트 핸들러 내부 함수는 앞서 기술한 라디오 버튼 상태 읽어 오기 방법을 사용한다.

https://stonefree.tistory.com/350

[JavaScript] 자바스크립트에서 라디오 버튼 상태 읽어오기

 

HTML                                                                                                                                                              index.html

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

JavaScript                                                                                                                                                          main.js

// form 요소 참조
const element = document.querySelector('#radioGroup');
// 변경을 감시
element.addEventListener('change', handleChange);

function handleChange(event) {
  // 현재 선택 상태를 가져오기
  const drinkValue = element.drink.value;
  const fruitValue = element.fruit.value;
  
  console.log(`drinkValue의 값은 ${drinkValue} 입니다.`);
  console.log(`fruitValue의 값은 ${fruitValue} 입니다.`);
}

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김