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

163_자바스크립트에서 라디오 버튼 상태 읽어오기

[적용]

• 라디오 버튼 상태를 확인하고 싶을 때

---

[문법]

속성	의미	타입
폼요소[키]	라디오 버튼 값	문자열

---

[내용]

라디오 버튼은 여러 선택 항목 중 하나의 데이터를 선택하는 폼이다.

자바스크립트로 라디오 버튼을 다루는 것은 다른 폼 요소보다 조금 더 복잡하다.

input 요소의 type 속성을 radio로 설정하고, name 속성으로 관련성을 설정한다.

 

다음은 form 요소에 포함된 라디오 버튼의 선택 값을 확인하는 예시이다.

과일과 음료의 그룹을 만들기 위해 name 속성에 각각 fruit와 drink라는 이름의 속성을 지정한다.

 

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>

자바스크립트로 form 요소를 참조한다.

form 요소 내 name 속성으로 라디오 버튼의 그룹을 나눈다.

value 값을 사용해 라디오 버튼 그룹의 값을 확인할 수 있다.

 

JavaScript                                                                                                                                                          main.js

// form 요소 참조
const element = codument.querySelector('form#radioGroup');

// 현재 선택 상태 확인
const drinkValue = element.drink.value;
const fruitValue = element.fruit.value;

console.log(`drinkValue의 값은 ${drinkValue} 입니다.`);
console.log(`fruitValue의 값은 ${fruitValue} 입니다.`);

 

---

 

 

 

 

 

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