자바스크립트 라디오 버튼 값 가져오기 Get value of selected radio button

html 에서 라디오버튼은 여러 항목 중 하나를 선택하도록 한다. 자바스크립트의 jquery 를 사용하여 라디오버튼에서 선택한 값을 가져올 수 있고, 이것을 사용하여 다른 부가적인 작업을 처리할 수 있다. 라디오 버튼에 이벤트를 연결하면 사용자에 동적인 정보를 제공할 수 있다.

자바스크립트 라디오 버튼 값 가져오기
Get value of selected radio button

여러 개의 항목 중에서 하나를 선택하는 작업을 수행할 때 라디오버튼을 사용한다.

라디오 버튼은 거의 모든 프로그래밍에서 자주 사용되는데 여러 개의 항목 중 단 하나만 선택이 가능하다.

여러 개의 데이터 중 하나를 선택하는 것은 어떤 것을 구분 짓거나 그룹으로 묶는 역할을 한다.

라디오 버튼은 html 에서도 자주 사용된다.

html 의 라디오 버튼

html 에서 라디오 버튼은 input 태그의 속성을 radio로 지정하여 사용할 수 있다.

여러개의 항목을 name 으로 묶고 단 한개를 선택할 수 있도록 한다.

자바스크립트가 여러 개의 라디오 버튼 중 하나를 선택할 수 있는 것은 checked 속성으로 찾을 수 있으며 클릭시 이벤트를 주어 값을 가져올 수도 있다.

아래는 radio 버튼을 사용하는 방법이다.

<input type="radio" id="motors" name="motors" value="HM"><span>(HM)현대자동차</span>
<input type="radio" id="motors" name="motors" value="KM"><span>(KM)기아자동차</span>
<input type="radio" id="motors" name="motors" value="CV"><span>(CV)쉐보레</span>
<input type="radio" id="motors" name="motors" value="LS"><span>(LS)르노삼성자동차</span>ㅁ

input type을 radio 로 지정하여 여러개의 라디오 버튼을 만들어 주었다.

name 속성에 동일한 값을 주고 그룹으로 값을 묶었으며 value 속성에 각각 다른 값을 설정하였다.

id 는 단순히 자바스크립트에서 접근하기 위해 지정하였다.

jquery 사용하여 값 가져오기

jquery 에서 라디오 버튼에서 값을 가져오는 것은 어렵지 않다.

jquery의 선택자의 val 메서드를 사용하면 된다.

다만 라디오 버튼의 특성상 배열이며 리스트 이기 떄문에 명확히 지정해 주어야 한다.

아래는 jquery 에서 라디오 버튼에 대한 이벤트를 등록하고 값을 가져오는 것을 보여준다.

/** 라디오버튼 이벤트 */
$("input:radio[name=\"motors\"]").change( function() {
    fnDisplayValue();
});

/** 라디오버튼 값 가져오기 */
$("input[name=\"motors\"]:checked").val();

전체 코드 및 설명

위의 내용으로 전체 코드를 작성해 보았다.

필요한 부분은 중간에 있는 스크립트 부분이다.

html 부분에서 input 태그에 radio 속성을 주고 라디어 버튼을 만들었다.

아래 코드가 처음 실행되면 라디오 버튼에 이벤트를 연결한다. 라디오 버튼의 이벤트는 사용자가 항목 선택시 값을 선택하고 화면에 표시하도록 하였다.

<!-- html5 웹문서 명시 -->
<!DOCTYPE html>
<html lang="ko">
	<head>
		<!-- 반응형 meta 명시 -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- jquery cdn -->
		<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
		<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  		<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
	</head>
	<body>
		<div>
			<input type="radio" id="motors" name="motors" value="HM"><span>(HM)현대자동차</span>
			<input type="radio" id="motors" name="motors" value="KM"><span>(KM)기아자동차</span>
			<input type="radio" id="motors" name="motors" value="CV"><span>(CV)쉐보레</span>
			<input type="radio" id="motors" name="motors" value="LS"><span>(LS)르노삼성자동차</span>
		</div>
		<div>
			<p id="dsp"></p>
		</div>
	</body>
	<script>
		$(document).ready( function() { /* Load Comp. without resources */ });
		$(window).on('load', function() { 
			/* Load Comp. with resources */

			/** 라디오버튼 이벤트 */
			$("input:radio[name=\"motors\"]").change( function() {
				fnDisplayValue();
			});
		});
	</script>
	<script>
		var fnDisplayValue = function() {
			var selected_value = $("input[name=\"motors\"]:checked").val();
			$("#dsp").text( selected_value );
		};
	</script>
</html>

결과화면을 보자.

라디오 버튼을 클릭할 때마다 값이 변경되는 것을 확인할 수 있다.

저작자표시 비영리 변경금지

'programming > javascript' 카테고리의 다른 글

자바 스프링 html input 태그의 입력값 서버로 데이터 전송하기 jquery serialize 메서드 사용 (0)	2023.01.09
자바 스프링 데이터 전송값 모두 확인하는 방법 (0)	2023.01.06
자바스립트 알림창 제목 표시하기 타이틀 문자열 지정 jquery ui 사용 (0)	2022.12.24
자바스크립트 알림창 여러 줄 표시하기 javascript alert multi line (0)	2022.12.22
자바스크립트 confirm 함수 예 아니오 선택하기 (0)	2022.12.20

자바스크립트 라디오 버튼 값 가져오기 Get value of selected radio button