JavaScript 또는 jQuery 를 사용하여 라디오 버튼을 확인하는 방법

라디오 버튼을 선택하려면 checked 속성을 true로 설정합니다. JavaScript에서는 입력 요소를 id 또는 value로 찾을 수 있고, jQuery에서는 .prop('checked', true)를 사용해 같은 작업을 할 수 있습니다. 라디오 그룹은 같은 name을 공유하므로, 한 입력 요소를 선택하면 해당 그룹에서 그 요소가 선택됩니다.

아래 폼은 뒤에서 사용할 ID, 그룹 이름, 값을 제공합니다:

<form id="preferences">
  <label><input type="radio" id="myradio_1" name="radiobutton" value="1"> Option 1</label>
  <label><input type="radio" id="myradio_2" name="radiobutton" value="2"> Option 2</label>
  <label><input type="radio" id="myradio_3" name="radiobutton" value="3"> Option 3</label>
</form>

JavaScript로 라디오 버튼 선택하기

ID를 알고 있다면 document.querySelector('#myradio_1').checked = true로 첫 번째 입력 요소를 선택할 수 있습니다. #은 ID 선택자를 나타내며, .checked는 현재 선택 상태입니다.

이 폼에서 값으로 선택하려면 document.querySelector('#preferences input[name="radiobutton"][value="2"]').checked = true를 사용합니다. 폼과 라디오 그룹으로 선택자 범위를 제한하면 페이지의 다른 곳에 있는 관련 없는 입력 요소와 일치하는 일을 막을 수 있습니다. 범위를 지정하지 않은 값 선택자는 문서에서 일치하는 입력 요소의 값이 고유할 때만 적절합니다.

다음 독립형 JavaScript 예제는 브라우저 DOM 없이 선택 상태를 모델링합니다. 앞서 나온 브라우저 전용 선택자는 실제 DOM API를 사용합니다.

다음 예제를 실행해 보세요:

const radios = [
  { id: "myradio_1", value: "1", checked: false },
  { id: "myradio_2", value: "2", checked: false },
  { id: "myradio_3", value: "3", checked: false }
];

const chosenRadio = radios.find((radio) => radio.id === "myradio_1");
chosenRadio.checked = true;
console.log(radios.find((radio) => radio.checked).value);

1

jQuery로 라디오 버튼 선택하기

이 호출들을 실행하기 전에 jQuery를 불러오세요. ID를 아는 입력 요소는 $('#myradio_1').prop('checked', true)로 선택할 수 있습니다. 값으로 선택하려면 폼 범위로 선택자를 제한하세요: $('#preferences input[name="radiobutton"][value="2"]').prop('checked', true). .prop() 메서드는 현재 선택 상태를 설정합니다. 이전 HTML 속성 값은 이후 사용자가 변경한 상태를 안정적으로 나타내지 못합니다.

버튼 클릭 시 라디오 버튼 선택하기

버튼을 추가하고 JavaScript로 클릭을 처리합니다. 폼 바깥에 있는 버튼에는 type="button"을 지정해야 폼이 제출되지 않습니다. 이 완전한 브라우저 페이지 예제에서는 버튼을 클릭하면 Option 1 라디오 버튼이 선택됩니다. 변경되지 않는 예제에서 화면에 표시되는 라벨 “Option 1”과 버튼 문구 “Select Option 1”은 영어로 남아 있습니다. 이는 정적 소스 코드 예제이며, 실행 결과가 있다고 주장하지 않습니다.

<form id="preferences">
  <label><input type="radio" id="myradio_1" name="radiobutton" value="1"> Option 1</label>
  <label><input type="radio" id="myradio_2" name="radiobutton" value="2"> Option 2</label>
  <label><input type="radio" id="myradio_3" name="radiobutton" value="3"> Option 3</label>
</form>
<button id="button_1" type="button">Select Option 1</button>
<script>
  document.querySelector('#button_1').addEventListener('click', () => {
    document.querySelector('#preferences input[value="1"]').checked = true;
  });
</script>