라디오버튼들이 있을 때, 선택된 라디오 버튼의 value와 텍스트를 가져오는 방법에 대해서 알아보겠습니다.

선택된 라디오 버튼 value 값 가져오기

선택된 라디오 버튼의 값을 화면에 출력하는 예제입니다.

HTML

3개의 라디오 버튼이 있고, 그 아래에 버튼이 있습니다. 버튼을 누르면 Javascript 함수를 호출하고, 선택된 라디오 버튼을 찾아서 그 값을 화면에 출력합니다.

<label>
  <input type="radio" name="radioGroup" value="option1"/> 옵션 1
</label>
<label>
  <input type="radio" name="radioGroup" value="option2"/> 옵션 2
</label>
<label>
  <input type="radio" name="radioGroup" value="option3"/> 옵션 3
</label>

<br>
<button id="getSelectedValueButton">선택된 값 가져오기</button>
<p id="selectedValue"></p>

Javascript

버튼에 대한 클릭 이벤트 리스너를 등록하여, 버튼이 클릭되면 함수가 실행됩니다. querySelector()로 체크된 라디오버튼을 찾고, 체크된 라디오 버튼이 있으면 그 값을 화면에 출력합니다.

  • document.getElementById("selectedValue") : 결과로 출력할 <p> 요소 찾기
  • document.querySelector("input[name='radioGroup']:checked") : input 요소 중에 name이 radioGroup이고 선택(checked=true)된 요소를 찾습니다.
  • selectedRadio.value : 선택된 라디오버튼의 value
const button = document.getElementById("getSelectedValueButton");
const selectedValue = document.getElementById("selectedValue");

button.addEventListener("click", function() {
  const selectedRadio = document.querySelector("input[name='radioGroup']:checked");

  if (selectedRadio) {
    selectedValue.textContent = "선택된 값: " + selectedRadio.value;
  } else {
    selectedValue.textContent = "라디오 버튼이 선택되지 않았습니다.";
  }
});

선택된 라디오 버튼의 텍스트 가져오기

선택된 라디어 버튼(<input>)의 value가 아닌, <label>의 텍스트를 가져오는 예제입니다.

HTML

위와 같이 3개의 라디오 버튼이 있고, 그 밑에 버튼을 클릭하면 Javascript 함수를 호출하여 선택된 버튼의 텍스트를 출력합니다.

<label id="option1">
  <input type="radio" name="radioGroup" value="option1"/> 옵션 1
</label>
<label id="option2">
  <input type="radio" name="radioGroup" value="option2"/> 옵션 2
</label>
<label id="option3">
  <input type="radio" name="radioGroup" value="option3"/> 옵션 3
</label>

<br>
<button id="getSelectedValueButton">선택된 버튼의 텍스트 가져오기</button>
<p id="selectedValue"></p>

Javascript

HTML을 보면 label의 id 값과, label에 해당하는 input의 value를 동일하게 설정하였습니다. 선택된 input의 value를 이용하여, label을 찾고 그 텍스트를 가져오려고 합니다.

코드를 보면 버튼이 클릭될 때, 선택된 라디오 버튼에 대한 input 요소를 찾고, input의 value를 id로 사용하여 label 요소를 찾습니다.

  • document.querySelector("label[id='" + selectedRadio.value + "']") : 라디오 버튼의 value를 id로 사용하여 label 요소 찾음
  • label.innerText : label의 텍스트 값
const button = document.getElementById("getSelectedValueButton");
const selectedValue = document.getElementById("selectedValue");

button.addEventListener("click", function() {
  const selectedRadio = document.querySelector("input[name='radioGroup']:checked");
  if (selectedRadio) {
    const label = document.querySelector("label[id='" + selectedRadio.value + "']");
    selectedValue.textContent = "텍스트: " + label.innerText;
  } else {
    selectedValue.textContent = "라디오 버튼이 선택되지 않았습니다.";
  }
});