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>
'프로그래밍 > jQuery & javaScript' 카테고리의 다른 글
| [jQuery] 키보드 스크롤 막기 (0) | 2022.04.13 |
|---|---|
| eval 함수 - 문자열을 소스 코드로 (0) | 2019.11.13 |
| [jQuery] 동적 태그에 이벤트 등록 (0) | 2019.10.28 |
| [jQuery] CSS 추가, 삭제, 변경 (0) | 2019.10.28 |
| [jQuery] 요소 삭제 remove와 empty (0) | 2019.09.10 |