jquery radio 값 가져오기
2025. 6. 4. 22:44ㆍ프로그램/Javascript
jQuery를 사용하여 HTML 라디오 버튼 그룹에서 선택된(checked) 값을 가져오는 방법은 매우 간결하고 효율적입니다. 핵심은 :checked 셀렉터를 사용하는 것입니다.
기본 문법
JavaScript
$('input[name="radio_group_name"]:checked').val();
설명:
- input: input 태그를 선택합니다.
- [name="radio_group_name"]: name 속성 값이 radio_group_name인 input 요소들을 선택합니다. 이 부분이 라디오 버튼 그룹을 지정하는 핵심입니다.
- :checked: 선택된(체크된) 요소를 필터링합니다. 라디오 그룹에서는 이 :checked 필터가 단 하나만 선택된 라디오 버튼을 정확히 찾아줍니다.
- .val(): 선택된 요소(여기서는 선택된 라디오 버튼)의 value 속성 값을 가져옵니다.
예제 코드
다음 HTML 폼과 함께 jQuery 코드를 살펴보겠습니다.
HTML:
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 라디오 값 가져오기</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<form id="myRadioForm">
<h2>선호하는 색상</h2>
<div>
<input type="radio" id="color_red" name="fav_color" value="red">
<label for="color_red">빨강</label>
</div>
<div>
<input type="radio" id="color_blue" name="fav_color" value="blue" checked>
<label for="color_blue">파랑</label>
</div>
<div>
<input type="radio" id="color_green" name="fav_color" value="green">
<label for="color_green">초록</label>
</div>
<br>
<button type="button" id="getValueBtn">선택된 색상 가져오기</button>
<p id="result"></p>
</form>
<script>
$(document).ready(function() {
// 버튼 클릭 이벤트 리스너
$('#getValueBtn').on('click', function() {
// 'fav_color' 그룹에서 선택된 라디오 버튼의 값 가져오기
var selectedColor = $('input[name="fav_color"]:checked').val();
// 가져온 값을 화면에 표시
if (selectedColor) {
$('#result').text("선택된 색상: " + selectedColor);
} else {
$('#result').text("아직 선택된 색상이 없습니다.");
}
});
// 라디오 버튼 변경 시 바로 값 가져오기 (선택적)
$('input[name="fav_color"]').on('change', function() {
var selectedColor = $('input[name="fav_color"]:checked').val();
console.log("변경됨: " + selectedColor);
});
});
</script>
</body>
</html>
코드 설명:
- $(document).ready(function() { ... });:
- jQuery 코드는 DOM(문서 객체 모델)이 완전히 로드된 후에 실행되도록 이 함수 안에 작성하는 것이 좋습니다.
- $('#getValueBtn').on('click', function() { ... });:
- ID가 getValueBtn인 버튼을 클릭했을 때 실행될 이벤트 핸들러를 설정합니다.
- var selectedColor = $('input[name="fav_color"]:checked').val();:
- 이것이 라디오 그룹에서 선택된 값을 가져오는 핵심 라인입니다.
- input[name="fav_color"]는 name 속성이 "fav_color"인 모든 input 태그를 선택합니다 (즉, 라디오 그룹 전체).
- :checked는 이 중에서 checked 상태인 요소를 필터링합니다. 라디오 그룹의 특성상, 이 필터링 결과는 항상 하나의 요소만 반환합니다 (혹은 아무것도 선택되지 않았을 경우 0개).
- .val()은 선택된 요소의 value 속성 값을 반환합니다.
- if (selectedColor) { ... } else { ... }:
- 만약 라디오 그룹에서 아무것도 선택되지 않은 상태라면 val() 메서드는 undefined를 반환할 수 있습니다. 이를 확인하여 적절한 메시지를 표시합니다.
- $('input[name="fav_color"]').on('change', function() { ... });:
- (선택 사항) 라디오 버튼의 선택 상태가 변경될 때마다 특정 동작을 수행하고 싶다면 change 이벤트를 사용할 수 있습니다. 사용자가 라디오 버튼을 클릭할 때마다 이 함수가 실행되어 현재 선택된 값을 콘솔에 출력합니다.
이 방법을 사용하면 jQuery를 통해 HTML 라디오 버튼 그룹의 선택된 값을 쉽고 안정적으로 가져올 수 있습니다.
'프로그램 > Javascript' 카테고리의 다른 글
| Video, Audio 태그 LoadedMetaData 에서 얻을수 있는 정보 (0) | 2025.06.08 |
|---|---|
| 구조화된 데이터 (Schema Markup) - VideoObject 설정 방법 (0) | 2025.06.04 |
| JavaScript 로 동영상 해상도 확인후 서버로 전송하기 (0) | 2025.06.04 |
| JavaScript Beautifier (0) | 2025.05.21 |