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

[jQuery] Checkbox 컨트롤 (체크, 체크여부, 전체체크 등)

by 밍구몬 2020. 1. 23.

1. CheckBox 체크

$('#ckBox').prop('checked',true);
$('input:checkbox[name="네임"]').prop('checked',true);

첫 번째 라인과 같이 체크박스의 id를 지정해서 체크하여도 되고, 두 번째 라인과 같이 name, id 등을 선택하여 체크할 수 있다.

true로 설정하면 체크가 되고, false로 설정하면 체크가 해제 된다.

2. CheckBox 체크여부 확인

$('#ckBox').is(':checked');

.is(':checked') 를 이용하여 체크되어 있는지 아닌지를 알 수 있다.

(true : 체크되어 있음, false : 체크되어 있지 않음)

3. CheckBox 전체 체크

<div>전체<input type="checkbox" id="allCk"></div>
<div>테스트1<input id="ck1" type="checkbox"></input></div>
<div>테스트2<input id="ck2" type="checkbox"></input></div>
<div>테스트3<input id="ck3" type="checkbox"></input></div>

위와 같은 checkbox가 있을 때, 전체 체크하는 방법은 간단하다.

	$('#allCk').click(function(){
		var checked = $('#allCk').is(':checked');
		
		if(checked)
			$('input:checkbox').prop('checked',true);
	});

allCk 체크박스를 클릭 했을 때, allCk가 체크되어 있다면 checkbox를 전부 다 true로 해주면 된다.

 

 

테스트 소스

<!DOCTYPE html>
<html>
<head>
	<script src="./jquery-3.4.1.min.js"></script>
</head>

<div>전체<input type="checkbox" id="allCk"></div>
<div>테스트1<input id="ck1" type="checkbox"></input></div>
<div>테스트2<input id="ck2" type="checkbox"></input></div>
<div>테스트3<input id="ck3" type="checkbox"></input></div>

<button type="button" id="btn1">1번 체크/언체크</button>
<button type="button" id="btn2">2번 체크/언체크</button>
<button type="button" id="btn3">3번 체크/언체크</button>
<script>
	$('#btn1').click(function(){
		var checked = $('#ck1').is(':checked');
		$('#ck1').prop('checked',!checked);
	});
	
	$('#btn2').click(function(){
		var checked = $('#ck2').is(':checked');
		$('#ck2').prop('checked',!checked);
	});
	
	$('#btn3').click(function(){
		var checked = $('#ck3').is(':checked');
		$('#ck3').prop('checked',!checked);
	});
	
	$('#allCk').click(function(){
		var checked = $('#allCk').is(':checked');
		
		if(checked)
			$('input:checkbox').prop('checked',true);
	});
</script>