본문 바로가기
프로그래밍/jQuery

제이쿼리(jQuery) Radio(라디오 버튼) 사용법 정리

루미오 2018. 12. 16. 21:02

안녕하세요. 루미오입니다.

jQuery에서의 Radio 사용법을 정리해 보겠습니다.

 

순서
● HTML Radio 선언
● Radio 변경 감지 (Change Event)
● Checked/Unchecked 찾기
● 상태 바꾸기 (Radio 1개)
● 상태 바꾸기 (전체)
● Radio Value 알아내기
● Radio 개수 확인
● Disabled 확인
● Disabled 설정/해제
● 전체 Source Code & 바로 Test [jsfiddle]

 

하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다.

 

● HTML Radio 선언

<fieldset>
	<legend>Colors</legend>
	<input type="radio" id="rdPink" name="rdColors" value="#ffc0cb" checked><label for="rdPink">PINK</label>
	<input type="radio" id="rdRed" name="rdColors" value="#ff0000" disabled><label for="rdRed">RED</label>
	<input type="radio" id="rdOrange" name="rdColors" value="#ffa500"><label for="rdOrange">ORANGE</label>
	<input type="radio" id="rdYellow" name="rdColors" value="#ffff00"><label for="rdYellow">YELLOW</label>
	<input type="radio" id="rdGreen" name="rdColors" value="#008000"><label for="rdGreen">GREEN</label>
	<input type="radio" id="rdCyan" name="rdColors" value="#00ffff"><label for="rdCyan">CYAN</label>
</fieldset>

<input> tag에 type은 radio를 사용하고 id, name, value를 설정할 수 있습니다. 선택되거나 선택을 설정하려면 selected를 설정하고, 비활성화시킬 때는 disabled를 설정하면 됩니다. 가끔 checked="checked"나 disabled="disabled"로 설정하는 경우가 있는데 이런 경우는 XHTML을 사용할 때만 사용하며, 요즘은 잘 사용하지 않습니다. Radio는 Group으로 묶어서 사용하는 경우가 대부분입니다 이럴때는 name을 동일하게 지정하면 됩니다. <input> tag 다음에 <label> tag는 Radio의 text를 선언합니다. <label> tag는 for attribute에 Radio의 id를 설정하면 서로 연결됩니다. <label> tag를 사용하지 않아도 됩니다. 하지만 사용하면 여러 가지로 유용하기 때문에 사용하는 습관을 들이는 게 좋습니다. 아래에서 각각의 <label>별로 배경색을 바꾸는 예가 나옵니다. <fieldset>은 여러 가지 element들을 하나로 묶어주는 tag입니다. 특별한 기능은 없습니다. 아래 코드는 지금 선언한 HTML을 기준으로 작성했습니다.

 

● Radio 변경 감지 (Change Event)

/* Checkbox change event */
$('input[name="rdColors"]').change(function() {
    // 모든 radio를 순회한다.
    $('input[name="rdColors"]').each(function() {
        var value = $(this).val();				// value
        var checked = $(this).prop('checked');	// jQuery 1.6 이상 (jQuery 1.6 미만에는 prop()가 없음, checked, selected, disabled는 꼭 prop()를 써야함)
        // var checked = $(this).attr('checked');	// jQuery 1.6 미만 (jQuery 1.6 이상에서는 checked, undefined로 return됨)
        // var checked = $(this).is('checked');
        var $label = $(this).next();

        if(checked)
            $label.css('background-color', value)
        else
            $label.css('background-color', 'white');
    });
});

Change Event를 만들 때는 jQuery의 change() 함수를 사용합니다. 함수에서 this는 변경이 발생한 element를 나타내며, $(this)는 this를 jQuery element로 만든 겁니다. 그래야 jQuery 함수를 사용할 수 있습니다. value를 알아내기 위해서 val() 함수를 사용했고, Radio의 상태를 알아내기 위해서 prop('checked') 함수를 사용했습니다. next() 함수는 바로 다음 elelement를 찾아줍니다. <label>을 찾기 위해서 사용했습니다. 또한 checked 되었으면 Radio의 value 값으로 <label>의 배경색을 바꿔주고, checked 해제 되었으면 흰색으로 바꿔줍니다. checked 상태를 확인할 때 사용할 수 있는 함수가 3개 있습니다. 먼저 prop()함수는 jQuery 1.6 이상에서 사용합니다. checked, selected, disabled 같이 attribute의 이름을 별도로 지정하지 않는 경우에 사용하면 됩니다. attr()을 사용하면 undefined를 보게 됩니다. 하지만 jQuery 1.6 미만에서는 prop() 함수가 없기 때문에 attr()을 사용해야 합니다. is() 함수는 attribute의 값을 알아내기 위한 함수가 아니고, element를 검사하는 함수이기 때문에 이 경우에 사용하면 속도 면에서 손해를 보게 됩니다.

 

● Checked/Unchecked 찾기

/* Checked 찾기 */
var id = $('input[name="rdColors"]:checked').attr('id');
var value = $('input[name="rdColors"]:checked').val();

/* Unchecked 찾기 */
var str = "";
$('input[name="rdColors"]:not(:checked)').each(function() {
    var id = $(this).attr('id');
    var value = $(this).val();
    str += id + "/" + value + ", ";
});

CSS Selector를 이용해서 name이 같고 checked인 element를 찾았습니다. Unchecked인 상태는 :not(:checked)을 이용했습니다.

 

● 상태 바꾸기 (Radio 1개)

/* PINK (Radio 1개) Checked 설정 */
$('#rdPink').prop('checked', true);

/* PINK (Radio 1개) Checked 해제 */
$('#rdPink').prop('checked', false);

/* PINK (Radio 1개) 상태 반전 */
$('#rdPink').prop('checked', !$('#rdPink').prop('checked'));

Radio의 상태를 임의로 바꾸는 방법은 위와 같이 간단합니다. 상태를 반전시킬 때 !를 사용했습니다.

 

● 상태 바꾸기 (전체)

/* 전체 Checked 해제 */
$('input[name="rdColors"]').each(function() {
    $(this).prop('checked', false);
});

Radio는 주로 Group으로 묶어서 사용하기 때문에 jQuery의 each() 함수를 이용해서 전체를 순회하면서 값을 변경해야 합니다. 또한 Radio를 찾을 때는 name을 사용합니다.

 

● Radio Value 알아내기

/* PINK (Checkbox 1개) Value */
var id = $('#rdPink').attr('id');
var value = $('#rdPink').val();

/* Checked Values */
var id = $('input[name="rdColors"]:checked').attr('id');
var value = $('input[name="rdColors"]:checked').val();

/* 전체 Unchecked Values */
var str = "";
$('input[name="rdColors"]:not(:checked)').each(function() {
    var id = $(this).attr('id');
    var value = $(this).val();
    str += id + "/" + value + ", ";
});

value를 알아내기 위해서는 val() 함수를 사용합니다. checked와 Uncheckekd를 찾을 때는 CSS Selector인:checked와 :not(:checked)를 사용했습니다.

 

● Radio 개수 확인

/* 전체 개수 */
/* name으로 찾기 */
var num = $('input[name="rdColors"]').length;

/* 전체 Checked 개수 */
var num = $('input[name="rdColors"]:checked').length;

/* 전체 Unchecked 개수 */
var num = $('input[name="rdColors"]:not(:checked)').length;

개수 확인은 length를 사용했습니다.

 

● Disabled 확인

/* PINK (Radio 1개) Disabled 여부 확인 */
/* ID로 찾기 */
var b = $('#rdPink').prop('disabled');	// jQuery 1.6 이상 (jQuery 1.6 미만에는 prop()가 없음, checked, selected, disabled는 꼭 prop()를 써야함)

/* CSS attribute Selector로 찾기 */
var b = $('input[id="rdPink"').prop('disabled');

비활성화 여부를 확인할 때도 prop() 함수를 사용하면 됩니다.

 

● Disabled 설정/해제

/* PINK (Checkbox 1개) Disabled 설정 */
$('#rdPink').prop('disabled', true);

/* PINK (Checkbox 1개) Disabled 해제 */
$('#rdPink').prop('disabled', false);

/* 전체 Disabled 설정 */
$('input[name="rdColors"]').each(function() {
    $(this).prop('disabled', true);
});

/* 전체 Disabled 해제 */
$('input[name="rdColors"]').each(function() {
    $(this).prop('disabled', false);
});

/* 전체 Disabled 반전 */
$('input[name="rdColors"]').each(function() {
    $(this).prop('disabled', !$(this).prop('disabled'));
});

비활성화의 설정, 해제, 반전하는 방법도 selected가 disabled로 가뀐 것 빼고는 완전히 동일합니다.

 

● 전체 Source Code & 바로 Test [jsfiddle]

Test를 바로 해볼 수 있도록 만든 Code입니다. 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>028 : 제이쿼리(jQuery) Radio(라디오 버튼) 사용법 정리</title>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> -->

		<script type="text/javascript">
			$(document).ready(function() {
				$('button').click(function() {
					$('#output').text('');
				});

            
				/* ==== # Checkbox Change Event ==== */
				/* Checkbox change event */
				$('input[name="rdColors"]').change(function() {
					// 모든 radio를 순회한다.
					$('input[name="rdColors"]').each(function() {
						var value = $(this).val();				// value
						var checked = $(this).prop('checked');	// jQuery 1.6 이상 (jQuery 1.6 미만에는 prop()가 없음, checked, selected, disabled는 꼭 prop()를 써야함)
						// var checked = $(this).attr('checked');	// jQuery 1.6 미만 (jQuery 1.6 이상에서는 checked, undefined로 return됨)
						// var checked = $(this).is('checked');
						var $label = $(this).next();

						if(checked)
							$label.css('background-color', value)
						else
							$label.css('background-color', 'white');
					});
				});


				/* ==== # Checked/Unchecked 찾기 ==== */
				/* Checked 찾기 */
				$('#btnGetChecked').click(function() {
					var $radioChecked = $('input[name="rdColors"]:checked');
					var id = $radioChecked.attr('id');
					var value = $radioChecked.val();
					$('#output').text("Checked 찾기 ID/Value : " + id + "/" + value);
				});

				/* Unchecked 찾기 */
				$('#btnGetUnchecked').click(function() {
					var str = "";
					$('input[name="rdColors"]:not(:checked)').each(function() {
						var id = $(this).attr('id');
						var value = $(this).val();
						str += id + "/" + value + ", ";
					});
					$('#output').text("Unchecked 찾기 ID/Value : " + str);
				});


				/* ==== # 상태 바꾸기 (Radio 1개) ==== */
				/* PINK (Radio 1개) Checked 설정 */
				$('#btnPinkChangeChecked').click(function() {
					$('#rdPink').prop('checked', true);
					$('#rdPink').trigger('change');
				});

				/* PINK (Radio 1개) Checked 해제 */
				$('#btnPinkChangeUnchecked').click(function() {
					$('#rdPink').prop('checked', false);
					$('#rdPink').trigger('change');
				});

				/* PINK (Radio 1개) 상태 반전 */
				$('#btnPinkChangeToggle').click(function() {
					$('#rdPink').prop('checked', !$('#rdPink').prop('checked'));
					$('#rdPink').trigger('change');
				});


				/* ==== # 상태 바꾸기 (전체) ==== */
				/* 전체 Checked 해제 */
				$('#btnAllUnchecked').click(function() {
					$('input[name="rdColors"]').each(function() {
						$(this).prop('checked', false);
						$(this).trigger('change');
					});
				});


				/* ==== # Value 알아내기 ==== */
				/* PINK (Checkbox 1개) Value */
				$('#btnPinkValue').click(function() {
					var id = $('#rdPink').attr('id');
					var value = $('#rdPink').val();
					$('#output').text("PINK (Checkbox 1개) Value : " + id + "/" + value);
				});

				/* Checked Values */
				$('#btnCheckedValues').click(function() {
					$('#btnGetChecked').click();
				});

				/* 전체 Unchecked Values */
				$('#btnUncheckedValues').click(function() {
					var str = "";
					$('input[name="rdColors"]:not(:checked)').each(function() {
						var id = $(this).attr('id');
						var value = $(this).val();
						str += id + "/" + value + ", ";
					});
					$('#output').text("전체 Unchecked Values : " + str);
				});


				/* ==== # 개수 확인 ==== */
				/* 전체 개수 */
				$('#btnTotalNumber').click(function() {
					/* name으로 찾기 */
					var num = $('input[name="rdColors"]').length;
					$('#output').text("전체 개수 : " + num);
				});

				/* 전체 Checked 개수 */
				$('#btnCheckedNumber').click(function() {
					var num = $('input[name="rdColors"]:checked').length;
					$('#output').text("전체 Checked 개수 : " + num);
				});

				/* 전체 Unchecked 개수 */
				$('#btnUncheckedNumber').click(function() {
					var num = $('input[name="rdColors"]:not(:checked)').length;
					$('#output').text("전체 Unchecked 개수 : " + num);
				});


				/* ==== # Disabled 확인 ==== */
				/* PINK (Radio 1개) Disabled 여부 확인 */
				$('#btnPinkDisabled').click(function() {
					/* ID로 찾기 */
					var b = $('#rdPink').prop('disabled');		// jQuery 1.6 이상 (jQuery 1.6 미만에는 prop()가 없음, checked, selected, disabled는 꼭 prop()를 써야함)
					// var b = $('#rdPink').attr('disabled');	// jQuery 1.6 미만 (jQuery 1.6 이상에서는 checked, undefined로 return됨)
					// var b = $('#rdPink').is('disabled');

					/* CSS attribute Selector로 찾기 */
					// var b = $('input[id="rdPink"').prop('disabled');
					// var b = $('input[id="rdPink"').attr('disabled');
					// var b = $('input[id="rdPink"').is('disabled');

					$('#output').text("PINK (Radio 1개) Disabled 여부 확인 : " + b);
				});


				/* ==== # Disabled 설정/해제 ==== */
				/* PINK (Checkbox 1개) Disabled 설정 */
				$('#btnPinkChangeDisabled').click(function() {
					$('#rdPink').prop('disabled', true);
				});

				/* PINK (Checkbox 1개) Disabled 해제 */
				$('#btnPinkChangeUndisabled').click(function() {
					$('#rdPink').prop('disabled', false);
				});

				/* 전체 Disabled 설정 */
				$('#btnAllChangeDisabled').click(function() {
					$('input[name="rdColors"]').each(function() {
						$(this).prop('disabled', true);
						$(this).trigger('change');
					});
				});

				/* 전체 Disabled 해제 */
				$('#btnAllChangeUndisabled').click(function() {
					$('input[name="rdColors"]').each(function() {
						$(this).prop('disabled', false);
						$(this).trigger('change');
					});
				});

				/* 전체 Disabled 반전 */
				$('#btnAllChangeToggle').click(function() {
					$('input[name="rdColors"]').each(function() {
						$(this).prop('disabled', !$(this).prop('disabled'));
						$(this).trigger('change');
					});
				});

            
				/* initial : 초기 HTML에 설정된 상태를 확인한다. */
				$('input[name="rdColors"]:checked').trigger('change');	// change event를 발생시킨다.
			});
		</script>
		<style type="text/css">
			div{margin-bottom:20px;}
			span{display:block;font-weight:bold;}
			button{margin:2px;}
			p[id='output']{min-height:24px;border:1px solid gray;border-radius:6px;padding:10px;font-weight:bold;}
			input{font-size:18px;}
			input[type='radio']:disabled + label{color:gray;}
		</style>
	</head>
	<body>
		<div>
			<fieldset>
				<legend>Colors</legend>
				<input type="radio" id="rdPink" name="rdColors" value="#ffc0cb" checked><label for="rdPink">PINK</label>
				<input type="radio" id="rdRed" name="rdColors" value="#ff0000" disabled><label for="rdRed">RED</label>
				<input type="radio" id="rdOrange" name="rdColors" value="#ffa500"><label for="rdOrange">ORANGE</label>
				<input type="radio" id="rdYellow" name="rdColors" value="#ffff00"><label for="rdYellow">YELLOW</label>
				<input type="radio" id="rdGreen" name="rdColors" value="#008000"><label for="rdGreen">GREEN</label>
				<input type="radio" id="rdCyan" name="rdColors" value="#00ffff"><label for="rdCyan">CYAN</label>
			</fieldset>
		</div>
		<p id="output">버튼을 눌러 보세요.</p>
		<div>
			<span># Radio Change Event : </span>
			<span style="color:blue;">Source Code를 확인하세요. (검색 : .change)</span>
		</div>
		<div>
			<span># Checked/Unchecked 찾기 : </span>
			<button type="button" id="btnGetChecked">Checked 찾기</button>
			<button type="button" id="btnGetUnchecked">Unchecked 찾기</button>
		</div>
		<div>
			<span># 상태 바꾸기 (Radio 1개) : </span>
			<button type="button" id="btnPinkChangeChecked">PINK (Radio 1개) Checked 설정</button>
			<button type="button" id="btnPinkChangeUnchecked">PINK (Radio 1개) Checked 해제</button>
			<button type="button" id="btnPinkChangeToggle">PINK (Radio 1개) 상태 반전</button>
		</div>
		<div>
			<span># 상태 바꾸기 (전체) : </span>
			<button type="button" id="btnAllUnchecked">전체 Checked 해제</button>
		</div>
		<div>
			<span># Value 알아내기 : </span>
			<button type="button" id="btnPinkValue">PINK (Radio 1개) Value</button>
			<button type="button" id="btnCheckedValues">전체 Checked Values</button>
			<button type="button" id="btnUncheckedValues">전체 Unchecked Values</button>
		</div>
		<div>
			<span># 개수 확인 : </span>
			<button type="button" id="btnTotalNumber">전체 개수</button>
			<button type="button" id="btnCheckedNumber">전체 Checked 개수</button>
			<button type="button" id="btnUncheckedNumber">전체 Unchecked 개수</button>
		</div>
		<div>
			<span># Disabled 확인 : </span>
			<button type="button" id="btnPinkDisabled">PINK (Radio 1개) Disabled 여부 확인</button>
		</div>
		<div>
			<span># Disabled 설정/해제 : </span>
			<button type="button" id="btnPinkChangeDisabled">PINK (Radio 1개) Disabled 설정</button>
			<button type="button" id="btnPinkChangeUndisabled">PINK (Radio 1개) Disabled 해제</button>
			<button type="button" id="btnAllChangeDisabled">전체 Disabled 설정</button>
			<button type="button" id="btnAllChangeUndisabled">전체 Disabled 해제</button>
			<button type="button" id="btnAllChangeToggle">전체 Disabled 반전</button>
		</div>

		<div style='border-width:1px 0;border-style:solid;margin:30px 0;text-align:center;'>
			<p><a href='https://loomio.kr' target='_blank' style='text-decoration:none;'>루미오 : Loomio - https://loomio.kr</a></p>
			<p><a href='https://loomio.kr/28' target='_blank' style='text-decoration:none;'>루미오 : 제이쿼리(jQuery) Radio(라디오 버튼) 사용법 정리</a></p>
		</div>
	</body>
</html>
→ 코드 확인 및 테스트

 

감사합니다.

- 루미오 . LOOMIO -

 

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

'프로그래밍 > jQuery' 카테고리의 다른 글

제이쿼리(jQuery) Select(셀렉트 박스) 사용법 정리  (1) 2018.12.16
제이쿼리(jQuery) Checkbox 사용법 정리  (0) 2018.12.16

'프로그래밍/jQuery' Related Articles

티스토리툴바