JavaScript로 라디오 버튼 값을 읽어 PHP로 전송하는 방법

라디오 버튼 값을 다룰 때 알아야 할 기본 원칙

HTML 문서에서 ID는 반드시 고유(unique)해야 합니다. 여러 요소에 동일한 id를 부여하면 JavaScript가 의도한 요소를 정확히 찾지 못해 오류가 발생할 수 있습니다. 따라서 라디오 버튼 그룹처럼 여러 입력 요소가 하나의 그룹을 이루는 경우에는 id 대신 name 속성을 기준으로 요소를 선택하는 것이 안전하고 표준적인 방법입니다.

jQuery로 선택된 라디오 버튼 값 읽기

아래 코드는 #controls 컨테이너 내부에서 name="option_avail"으로 지정된 라디오 버튼 중 현재 체크된 항목의 값(value)을 가져오는 가장 간결한 방법입니다.

var option_avail = $('input[name=option_avail]:checked', '#controls').val();

:checked 필터를 사용하면 그룹 내에서 사용자가 선택한 단 하나의 버튼만 정확하게 조회할 수 있습니다.

예제 HTML 마크업

부트스트랩(Bootstrap) 버튼 스타일을 적용한 라디오 버튼 그룹 예시입니다. 세 개의 버튼이 모두 같은 name 속성을 공유하므로 하나의 그룹으로 묶여 있으며, 사용자는 한 번에 하나의 옵션만 선택할 수 있습니다.

<label class="btn btn-primary active">
    <input type="radio" class="form-control" name="option_avail" value="Option_one" checked /> firstoption
</label>
<label class="btn btn-primary ">
    <input type="radio" class="form-control" name="option_avail" value="Option_two" /> secondoption
</label>
<label class="btn btn-primary ">
    <input type="radio" class="form-control" name="option_avail" value="Option_three" /> thirdoption
</label>

가져온 값을 PHP로 전송하기

JavaScript로 읽어온 값을 서버 측 PHP로 넘기려면 크게 두 가지 방법을 사용할 수 있습니다.

1. AJAX를 이용한 비동기 전송

페이지를 새로고침하지 않고 값을 전송하려면 jQuery의 $.post() 또는 $.ajax()를 활용하는 것이 가장 일반적입니다.

$.post('process.php', { option: option_avail }, function(response) {
    console.log('서버 응답:', response);
});

PHP 파일에서는 $_POST 슈퍼글로벌 변수로 해당 값을 받아 처리할 수 있습니다.

<?php
$option = $_POST['option'] ?? '';
echo '선택된 옵션: ' . htmlspecialchars($option);
?>

2. 폼(Form) 제출을 통한 전송

별도의 JavaScript 없이 라디오 버튼들이 <form> 태그 안에 있다면, 폼을 제출하는 것만으로도 선택된 값이 자동으로 전송됩니다. 이 경우 PHP에서는 마찬가지로 $_POST['option_avail'] 형태로 값을 확인할 수 있습니다.

정리

핵심은 다음과 같습니다. 첫째, 라디오 버튼 그룹은 고유한 name 속성으로 묶고 id는 사용하지 않습니다. 둘째, jQuery의 :checked 선택자로 현재 선택된 값을 손쉽게 읽어옵니다. 셋째, 읽어온 값은 AJAX 또는 폼 제출을 통해 PHP로 전달하며, 서버에서는 $_POST로 안전하게 처리하면 됩니다.