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

제이쿼리(jQuery) Checkbox 사용법 정리

루미오 2018. 12. 16. 19:50

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

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

 

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

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

 

● HTML Checkbox 선언

<input type="checkbox" id="chckbxPink" name="chckbxColors" value="#ffc0cb" checked disabled><label for="chckbxPink">PINK</label>
<input type="checkbox" id="chckbxRed" name="chckbxColors" value="#ff0000" checked><label for="chckbxRed">RED</label>
<input type="checkbox" id="chckbxOrange" name="chckbxColors" value="#ffa500" disabled><label for="chckbxOrange">ORANGE</label>
<input type="checkbox" id="chckbxYellow" name="chckbxColors" value="#ffff00"><label for="chckbxYellow">YELLOW</label>
<input type="checkbox" id="chckbxGreen" name="chckbxColors" value="#008000"><label for="chckbxGreen">GREEN</label>
<input type="checkbox" id="chckbxCyan" name="chckbxColors" value="#00ffff"><label for="chckbxCyan">CYAN</label>

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

 

● Checkbox 변경 감지 (Change Event)

/* Checkbox change event */
$('input[name="chckbxColors"]').change(function() {
	var value = $(this).val();				// value
	var checked = $(this).prop('checked');	// checked 상태 (true, false)
	var $label = $(this).next();			// find a label element

	// checked ? $label.css('background-color', value) : $label.css('background-color', 'white');
	if(checked)
		$label.css('background-color', value);		// label의 배경색을 바꾼다.
	else
		$label.css('background-color', 'white');	// label의 배경색을 초기화 한다.
});

Change Event를 만들 때는 jQuery의 change() 함수를 사용합니다. 함수에서 this는 변경이 발생한 element를 나타내며, $(this)는 this를 jQuery element로 만든 겁니다. 그래야 jQuery 함수를 사용할 수 있습니다. value를 알아내기 위해서 val() 함수를 사용했고, Checkbox의 상태를 알아내기 위해서 prop('checked') 함수를 사용했습니다. next() 함수는 바로 다음 elelement를 찾아줍니다. <label>을 찾기 위해서 사용했습니다. 또한 checked 되었으면 Checkbox의 value 값으로 <label>의 배경색을 바꿔주고, checked 해제 되었으면 흰색으로 바꿔줍니다. 3항 조건 연산자가 조금 빠르다고 하니 간단한 if-else문은 3항 조건 연산자를 사용하는 게 좋습니다.

 

● Checked 여부 확인

/* ID로 찾기 */
var b = $('#chckbxPink').prop('checked');	// jQuery 1.6 이상 (jQuery 1.6 미만에는 prop()가 없음, checked, selected, disabled는 꼭 prop()를 써야함)
var b = $('#chckbxPink').attr('checked');	// jQuery 1.6 미만 (jQuery 1.6 이상에서는 checked, undefined로 return됨)
var b = $('#chckbxPink').is(':checked');

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

checked 상태를 확인할 때 사용할 수 있는 함수가 3개 있습니다. 먼저 prop()함수는 jQuery 1.6 이상에서 사용합니다. checked, selected, disabled 같이 attribute의 이름을 별도로 지정하지 않는 경우에 사용하면 됩니다. attr()을 사용하면 undefined를 받게 됩니다. 하지만 jQuery 1.6 미만에서는 prop() 함수가 없기 때문에 attr()을 사용해야 합니다. is() 함수는 attribute의 값을 알아내기 위한 함수가 아니고, element를 검사하는 함수이기 때문에 이 경우에 사용하면 속도 면에서 손해를 보게 됩니다.

 

● 상태 바꾸기 (Checkbox 1개)

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

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

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

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

 

● 상태 바꾸기 (Checkbox 전체)

/* 전체 Checked 선택 */
$('input[name="chckbxColors"]').each(function() {
	$(this).prop('checked', true);
});

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

/* 전체 상태 반전 */
$('input[name="chckbxColors"]').each(function() {
	$(this).prop('checked', !$(this).prop('checked'));
});

Checkbox를 Group으로 묶어서 사용할 때 상태 값을 변경해야 할 때가 있습니다. 이때는 jQuery의 each() 함수를 이용해서 전체를 순회하면서 값을 변경해야 합니다. 또한 Checkbox를 찾을 때는 name을 사용합니다.

 

● Checkbox Value 알아내기

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

/* 전체 Checked Values */
var values = "";
$('input[name="chckbxColors"]:checked').each(function() {
	values += $(this).val() + ", ";
});

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

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

 

● Checkbox 개수 확인

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

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

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

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

 

● Checkbox Array에 넣기

/* 전체 Array에 넣기 */
var arr = [];
$('input[name="chckbxColors"]').each(function(index) {
	var bChecked = $(this).prop('checked');
	var id = $(this).attr('id');
	var value = $(this).val();
	arr.push('[' + index + ']('+ bChecked + ')' + id + ':' +  value);
});

/* 전체 Checked Array에 넣기 */
var arr = [];
$('input[name="chckbxColors"]:checked').each(function(index) {
	var bChecked = $(this).prop('checked');
	var id = $(this).attr('id');
	var value = $(this).val();
	arr.push('[' + index + ']('+ bChecked + ')' + id + ':' +  value);
});

/* 전체 Unchecked Array에 넣기 */
var arr = [];
$('input[name="chckbxColors"]:not(:checked)').each(function(index) {
	var bChecked = $(this).prop('checked');
	var id = $(this).attr('id');
	var value = $(this).val();
	arr.push('[' + index + ']('+ bChecked + ')' + id + ':' +  value);
});

Checkbox의 상태를 Array에 저장해야 할 때가 있습니다. 간단하게 push() 함수로 해결하면 됩니다.

 

● Disabled 확인

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

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

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

 

● Disabled 설정/해제

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

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

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

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

/* 전체 Disabled 반전 */
$('input[name="chckbxColors"]').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>027 : 제이쿼리(jQuery) Checkbox 사용법 정리</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="chckbxColors"]').change(function() {
					var value = $(this).val();				// value
					var checked = $(this).prop('checked');	// checked 상태 (true, false)
					var $label = $(this).next();			// find a label element

					// checked ? $label.css('background-color', value) : $label.css('background-color', 'white');
					if(checked)
						$label.css('background-color', value);		// label의 배경색을 바꾼다.
					else
						$label.css('background-color', 'white');	// label의 배경색을 초기화 한다.
				});


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

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

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


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

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

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


				/* ==== # 상태 바꾸기 (전체) ==== */
				/* 전체 Checked 선택 */
				$('#btnAllChecked').click(function() {
					$('input[name="chckbxColors"]').each(function() {
						$(this).prop('checked', true);
						$(this).trigger('change');
					});
				});

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

				/* 전체 상태 반전 */
				$('#btnAllToggle').click(function() {
					$('input[name="chckbxColors"]').each(function() {
						$(this).prop('checked', !$(this).prop('checked'));
						$(this).trigger('change');
					});
				});


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

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

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


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

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

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


				/* ==== # Array에 넣기 ==== */
				/* 전체 Array에 넣기 */
				$('#btnAllArray').click(function() {
					var arr = [];
					$('input[name="chckbxColors"]').each(function(index) {
						var bChecked = $(this).prop('checked');
						var id = $(this).attr('id');
						var value = $(this).val();
						arr.push('[' + index + ']('+ bChecked + ')' + id + ':' +  value);
					});
					$('#output').text("전체 Array에 넣기 : " + arr);
				});

				/* 전체 Checked Array에 넣기 */
				$('#btnCheckedArray').click(function() {
					var arr = [];
					$('input[name="chckbxColors"]:checked').each(function(index) {
						var bChecked = $(this).prop('checked');
						var id = $(this).attr('id');
						var value = $(this).val();
						arr.push('[' + index + ']('+ bChecked + ')' + id + ':' +  value);
					});
					$('#output').text("전체 Checked Array에 넣기 : " + arr);
				});

				/* 전체 Unchecked Array에 넣기 */
				$('#btnUncheckedArray').click(function() {
					var arr = [];
					$('input[name="chckbxColors"]:not(:checked)').each(function(index) {
						var bChecked = $(this).prop('checked');
						var id = $(this).attr('id');
						var value = $(this).val();
						arr.push('[' + index + ']('+ bChecked + ')' + id + ':' +  value);
					});
					$('#output').text("전체 Unchecked Array에 넣기 : " + arr);
				});


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

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

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


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

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

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

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

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



				/* initial : 초기 HTML에 설정된 상태를 확인한다. */
				$('input[name="chckbxColors"]:checked').each(function() {
					$(this).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='checkbox']:disabled + label{color:gray;}
		</style>
	</head>
	<body>
		<div>
			<input type="checkbox" id="chckbxPink" name="chckbxColors" value="#ffc0cb" checked disabled><label for="chckbxPink">PINK</label>
			<input type="checkbox" id="chckbxRed" name="chckbxColors" value="#ff0000" checked><label for="chckbxRed">RED</label>
			<input type="checkbox" id="chckbxOrange" name="chckbxColors" value="#ffa500" disabled><label for="chckbxOrange">ORANGE</label>
			<input type="checkbox" id="chckbxYellow" name="chckbxColors" value="#ffff00"><label for="chckbxYellow">YELLOW</label>
			<input type="checkbox" id="chckbxGreen" name="chckbxColors" value="#008000"><label for="chckbxGreen">GREEN</label>
			<input type="checkbox" id="chckbxCyan" name="chckbxColors" value="#00ffff"><label for="chckbxCyan">CYAN</label>
		</div>
		<p id="output">버튼을 눌러 보세요.</p>
		<div>
			<span># Checkbox Change Event : </span>
			<span style="color:blue;">Source Code를 확인하세요. (검색 : .change)</span>
		</div>
		<div>
			<span># Checked 확인 : </span>
			<button type="button" id="btnPinkChecked">PINK (Checkbox 1개) Checked 여부 확인</button>
		</div>
		<div>
			<span># 상태 바꾸기 (Checkbox 1개) : </span>
			<button type="button" id="btnPinkChangeChecked">PINK (Checkbox 1개) Checked 설정</button>
			<button type="button" id="btnPinkChangeUnchecked">PINK (Checkbox 1개) Checked 해제</button>
			<button type="button" id="btnPinkChangeToggle">PINK (Checkbox 1개) 상태 반전</button>
		</div>
		<div>
			<span># 상태 바꾸기 (전체) : </span>
			<button type="button" id="btnAllChecked">전체 Checked 선택</button>
			<button type="button" id="btnAllUnchecked">전체 Checked 해제</button>
			<button type="button" id="btnAllToggle">전체 상태 반전</button>
		</div>
		<div>
			<span># Value 알아내기 : </span>
			<button type="button" id="btnPinkValue">PINK (Checkbox 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># Array에 넣기 : </span>
			<button type="button" id="btnAllArray">전체 Array에 넣기</button>
			<button type="button" id="btnCheckedArray">전체 Checked Array에 넣기</button>
			<button type="button" id="btnUncheckedArray">전체 Unchecked Array에 넣기</button>
		</div>
		<div>
			<span># Disabled 확인 : </span>
			<button type="button" id="btnPinkDisabled">PINK (Checkbox 1개) Disabled 여부 확인</button>
		</div>
		<div>
			<span># Disabled 설정/해제 : </span>
			<button type="button" id="btnPinkChangeDisabled">PINK (Checkbox 1개) Disabled 설정</button>
			<button type="button" id="btnPinkChangeUndisabled">PINK (Checkbox 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/27' target='_blank' style='text-decoration:none;'>루미오 : 제이쿼리(jQuery) Checkbox 사용법 정리</a></p>
		</div>
	</body>
</html>
→ 코드 확인 및 테스트

 

감사합니다.

- 루미오 . LOOMIO -

 

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

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

제이쿼리(jQuery) Select(셀렉트 박스) 사용법 정리  (1) 2018.12.16
제이쿼리(jQuery) Radio(라디오 버튼) 사용법 정리  (2) 2018.12.16

'프로그래밍/jQuery' Related Articles

티스토리툴바