jQuery 선택된 라디오 박스 값 가져오기



jQuery에서 라디오 버튼의 선택된 값을 가져오는 다양한 방법입니다.



기본 방법


// name 속성으로 선택된 값 가져오기
$('input[name="mdleTypeCodeBtn"]:checked').val();

// 또는 :radio 선택자 사용
$(':radio[name="mdleTypeCodeBtn"]:checked').val();


다양한 선택 방법


// ID로 선택
$("#radioGroup input:checked").val();

// 클래스로 선택
$(".radio-group input:checked").val();

// form 내부의 라디오 버튼
$("#myForm input[type=radio]:checked").val();


선택 여부 확인


// 선택된 라디오 버튼이 있는지 확인
if ($("input[name=gender]:checked").length > 0) {
    var selectedValue = $("input[name=gender]:checked").val();
    console.log("선택된 값: " + selectedValue);
} else {
    console.log("선택된 항목이 없습니다.");
}


라디오 버튼 제어


// 특정 값으로 선택
$("input[name=gender][value=male]").prop("checked", true);

// 첫 번째 항목 선택
$("input[name=gender]:first").prop("checked", true);

// 선택 해제
$("input[name=gender]").prop("checked", false);


이벤트 처리


// 변경 이벤트
$("input[name=gender]").change(function() {
    var selectedValue = $(this).val();
    console.log("선택됨: " + selectedValue);
});

// 동적 요소에 이벤트 바인딩
$(document).on("change", "input[name=gender]", function() {
    console.log($(this).val());
});


라디오 버튼 정보 가져오기


// 선택된 라디오의 data 속성
$("input[name=gender]:checked").data("id");

// 선택된 라디오의 텍스트 (label)
$("input[name=gender]:checked").next("label").text();

// 또는 label for 속성 사용시
$("label[for="" + $("input[name=gender]:checked").attr("id") + ""]").text();


HTML 예시


<input type="radio" name="gender" value="male" id="male">
<label for="male">남성</label>
<input type="radio" name="gender" value="female" id="female">
<label for="female">여성</label>