[javascript] 자바스크립트 라디오 버튼 사용방법

참고: https://ultimatecourses.com/blog/check-radio-button

이 포스트에서는 radio input(<input type="radio">)을 확인하는 여러가지 방법을 알아보겠습니다. checked 속성만이 라디오 버튼 값을 확인하는 유일한 방법이 아닙니다. 특정 라디오 버튼을 확인하려면 어떻게 해야하는지 값을 기준으로 라디오 버튼을 확인하려면 어떻게 해야하는지 알아보겠습니다.

라디오 버튼 만들기

다음은 라디오 버튼의 값을 보이기 위해 사용할 코드입니다. 이는 checked 속성을 통해 HTML로 기본값을 설정하는 방법입니다. JavaScript를 사용하지 않고 순수 HTML만으로도 설정이 가능합니다.

<form name="demo">
  <label>
    Mario
    <input type="radio" value="mario" name="characters" checked />
  </label>
  <label>
    Luigi
    <input type="radio" value="luigi" name="characters" />
  </label>
  <label>
    Toad
    <input type="radio" value="toad" name="characters" />
  </label>
</form>

이제 JavaScript로 form과 radio 제어 그룹에 대한 참조를 만들어 보겠습니다.

const form = document.forms.demo;
const radios = form.elements.characters;

여기서는 input의 name="characters" 속성에 접근할 수 있는 HTMLFormElement.elements 속성을 사용했습니다. 라디오 버튼을 같은 그룹으로 연결해서 사용하려면 name="value" 속성이 동일해야합니다.

그렇다면 이제 어떻게 값을 설정하고 라디오 버튼에 체크표시를 할 수 있을까요? 먼저 문자열을 통해 원하는 값을 설정하는 방법을 알아보고 다음으로 체크할 특정 라디오 버튼을 쿼리하여 수동으로 확인하는 방법을 알아보겠습니다.

RadioNodeList.value 속성 사용하기

위의 자바스크립트 코드에서 radios 변수를 로그찍어보면 흥미로운 점을 볼 수 있습니다.

RadioNodeList 인터페이스는 <form> 또는 <fieldset> 요소 안에 포함된 radio 요소들의 콜렉션입니다. 이는 또한 배열같은 객체입니다. 즉 배열 내 항목의 .value 속성에 접근할 수 있을 뿐만 아니라 루프를 돌 수도 있습니다. 실제로 우리는 이 value에만 관심이 있는데 이 값을 사용하는게 라디오 버튼을 체크표시하는 가장 간단한 방법이기 때문입니다.

const radios = form.elements.characters;

radios.value = 'luigi';

위의 코드는 'luigi'를 RadioNodeList.value(라디오 버튼의 그룹)로 설정하여 라디오 그룹내의 라디오 버튼 중 value가 luigi인 라디오 버튼을 체크표시하고 브라우저 화면을 갱신합니다.

지금까지는 radios.value 속성을 사용해 체크표시를 해봤습니다. 그런데 이 방법은 미리 설정할 value를 알고있어야 합니다. 상황에 따라서 라디오 버튼에 대한 참조를 얻은 다음 checked로 설정해야할 수도 있습니다.

checked 속성 사용하기

이제 DOM 노드에서 라디오 버튼의 checked 속성을 알아보겠습니다. 이는 그냥 true로 값을 바꾸는 것으로 매우 간단합니다. 하지만 먼저 checked로 설정할 DOM 노드에 대한 참조가 필요합니다. 다음 코드의 radios 변수가 RadioNodeList를 반환하기 때문에 여기에 배열처럼 항목에 접근할 수 있습니다.

const form = document.forms.demo;
const radios = form.elements.characters;

const radioToUpdate = radios[0];
radioToUpdate.checked = true;

위의 예제에서 처럼 radios[1] 이나 radios[2]로 항목에 접근할 수 있습니다. 또한 NodeList는 배열과 마찬가지로 0부터 시작하는 인덱스 값을 가집니다.

정리

여러 선택지가 있습니다. 어떤 방법이 더 좋을까요? 해당 라디오 버튼에 대한 참조가 있으면 checked 속성을 사용하는 것이 좋습니다. 또는 라디오 버튼을의 값들을 이미 알고있고 일치하는 값을 알고있다면 radios.value = 'value' 구문을 사용할 수 있습니다. 이는 DOM 노드를 직접 처리할 필요가 없기 때문에 좋습니다. 왜냐하면 라디오 버튼들을 가지고있는 RadioNodeList를 가지고있기 때문입니다.