프로그래밍/jQuery & javaScript
[jQuery] Checkbox 컨트롤 (체크, 체크여부, 전체체크 등)
밍구몬
2020. 1. 23. 11:11
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>