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

라디오 버튼 상태 읽어 오기

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

구문

폼요소[키]

설명

라디오 버튼은 여러 선택 항목 중 하나의 데이터를 선택하는 폼입니다. 자바스크립트로 라디오 버튼을 다루는 것은 다른 폼 요소보다 조금 더 복잡합니다. input 요소의 type 속성을 radio로 설정하고, name 속성으로 관련성을 설정합니다. 다음은 form 요소에 포함된 라디오 버튼의 선택 값을 확인하는 샘플입니다. 과일과 음료의 그룹을 만들기 위해 name 속성에 각각 fruit와 drink라는 이름의 속성을 지정합니다.

실습

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('form#radioGroup');
const drinkValue = element.drink.value;
const fruitValue = element.fruit.value;
console.log(`drinkValue의 값은 ${drinkValue} 입니다.`);
console.log(`fruitValue의 값은 ${fruitValue} 입니다.`);