라디오 버튼을 활용하여 선택한 값 가져오기

라디오 버튼에 대한 오해와 진실로 인해 많은 시간을 흘려 보낸 과정을 정리합니다.

라디오버튼 구현

<form>
  <input type="radio" name="language" value="en-US" id="english" checked>
  <label for="english">English</label>

  <input type="radio" name="language" value="ko-KR" id="korean">
  <label for="korean">Korean</label>
</form>

 

라디오버튼은 위와 같이 간단하게 구현할 수 있습니다. 위 코드에서 input 태그가 선택버튼에 해당하고, label 태그를 통해 각 선택 항목이 어떤 항목인지에 대한 텍스트를 부여합니다.  

여기서 중요한 부분은 `name` 부분입니다. 두 개의 input 태그의 name을 language로 설정해두었는데 이렇게 같은 이름을 붙여줘야 한 묶음으로 인식하고, 그렇게 해야 양자택일이 가능해집니다.

또한 `checked` 라는 단어가 부여된 input 태그는 사이트 접속 시 기본적으로 선택되도록 하는 옵션입니다.

 

오해와 진실

처음에 라디오버튼을 사용하기로 했을 때 저는 input태그의 checked단어가 버튼을 선택할 때 마다 선택한 태그에 자동 적용된다고 생각했습니다. 예를 들어 제가 english 버튼을 선택했다가 korean 버튼을 선택하면 korean 버튼에 checked표시가 옮겨진다고 생각했습니다.

그런데 실제 버튼을 바꿔 눌러가면서 개발자 도구로 html을 살펴봤지만 checked는 계속 english 태그에만 존재했습니다. 그래서 기존에 구현한 기능과 꼬여서 뭐가가 잘못되었다고 생각했습니다.

이 부분에 집착한 이유는 제가 선택한 라디오버튼의 value값을 가져오는 기능을 구현 중이었는데, checked가 외관상 항상 변화가 없었고, 그 때문에 제가 구현한 value값 가져오기 기능이 정상적으로 작동하지 않는다고 생각했습니다.

하지만 원래 checked는 외관상 보여지는 것이 아니었습니다.

 

선택한 라디오버튼에서 value 가져오기

진실은 아래 코드를 통해 확인할 수 있었습니다.

const getLanguage = () => {
  let currlanguage;
  const radioLanguage = document.getElementsByName('language');
  radioLanguage.forEach((radio) => {
    console.dir(radio) // radio 태그의 객체를 확인합니다.
  });
}

language라는 이름을 가진 라디오버튼 태그들을 .getElementsByName 메서드로 가져와서 forEach를 통해 하나씩 꺼내고, 
이후 console.dir() 기능을 적용하면 각 라디오버튼이 갖고 있는 모든 프로퍼티를 확인할 수 있었습니다.
여기에서 checked 프로퍼티도 확인할 수 있었는데 'checked: true'와 같은 형식으로 포함되어 있는 것을 확인할 수 있었습니다.

또한 선택된 라디오버튼은 true값을, 나머지는 false값을 가지는 것을 확인할 수 있었고, defaultValue라는 프로퍼티를 통해 라디오버튼에 부여된 value값도 직접 가져올 수 있었습니다.

 

const getLanguage = () => {
  let currlanguage;
  const radioLanguage = document.getElementsByName('language');
  radioLanguage.forEach((radio) => {
    if (radio.checked) {
      currlanguage = radio.defaultValue;
    }
  });
  return currlanguage;

결론적으로 위와 같이 기능을 구현하였습니다. checked 프로퍼티가 true라면, 즉 선택되었다면 해당 태그의 기본 value값을 리턴하도록 했습니다.

결론

console.dir() 기능을 통해 DOM요소에 포함된 속성을 확인할 수 있다는 사실을 알게 되었고, DOM요소에 담긴 속성에 직접적으로 접근할 수 있도록 객체 형태로 되어 있어 앞으로 자주 console.dir() 기능을 사용하면서 디버깅을 진행하면 구현 시간을 단축할 수 있을 것 같습니다.