[jQuery] 체크박스 값변경 선택 및 감지하기
jQuery를 이용한 체크박스 사용에 관한 것입니다.
체크박스는 원칙적으로 만들어지기를 여러개를 선택할 수 있는것을 말합니다.
그렇기 때문에 체크된 값을 가져올때는 모두 가져오는것이 아니라 맨 앞에 있는것이 리턴이 되며 체크된 모든것을 가져오게 하려면 루프를 돌려서 사용하면 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery test </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<form>
<input type="checkbox" id="chk1" name="chkBox" value="1"> chk1
<input type="checkbox" id="chk2" name="chkBox" value="2"> chk2
<input type="checkbox" id="chk3" name="chkBox" value="3"> chk3
<input type="checkbox" id="chk4" name="chkBox" value="4"> chk4
</form>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function()
{
// id 값으로 체크 되었는지 확인 한다
if ( $('input:checkbox[id="chk2"]').is(":checked") == true ) {
console.log('id -> chk2 체크 되었습니다.');
}
// name 값으로 체크 되었는지 확인 한다
if ( $('input:checkbox[name="chkBox"]').is(":checked") == true ) {
console.log('name -> chk2 체크 되었습니다.');
}
// id값은 유니크한 특성 때문에 이름이 같은 경우만 갯수 체크가 가능하게 된다
console.log('체크박스 갯수: ', $('input:checkbox[name="chkBox"]').length );
console.log('체크된 갯수: ', $('input:checkbox[name="chkBox"]:checked').length );
console.log("\n");
// 체크박스 루프
$('input:checkbox[name="chkBox"]').each(function()
{
// 값이 2인것을 체크 한다
if ( this.value == 2 ) {
this.checked = true;
this.value = 55;
var idx = $(this).index();
console.log( '체크박스명:', this.name, ' id명:', this.id, ' 값:', this.value, ' 인덱스값:', idx );
}
});
console.log("\n");
// 특정 id값에 대한 체크박스를 체크해주기 - attr이 아니라 prop를 사용해야 한다
$('input:checkbox[id="chk2"]').prop('checked', false);
$('input:checkbox[id="chk3"]').prop('checked', true);
$('#chk4').prop('checked', true);
console.log('체크된 갯수: ', $('input:checkbox[name="chkBox"]:checked').length, ' / chk2 변경한값 확인: ', $('#chk2').val() );
// 여러개일 경우 앞의 것이 나온다
console.log('체크된 값: ', $('input:checkbox[name="chkBox"]:checked').val() );
// 현재 상태 전체 반전 시키기
$('[name=chkBox]').prop('checked', function(i, val){ return !val });
// 2번째 인덱스의 값 가져오기 - 0 부터 시작하는것을 알 수 있다
console.log( '인덱스로 접근하기: ', $('[name=chkBox]').eq(1).val() );
// 체크되지 않는것만 확인하기
$('input[name="chkBox"]:not(:checked)').each(function() {
console.log( '체크되지 않는것: ', this.id, ' - 값:', $(this).val() );
});
// 기능이 안되게 설정 하기
$('input:checkbox[id="chk2"]').prop('disabled', true);
// 없는 id name 지정해도 오류는 발생 하지 않는다
$('input:checkbox[id="abc"]').attr('checked', true);
$('input:checkbox[name="abc"]').attr('checked', true);
// 값이 맞는것을 찾아서 섡택 되게 한다
$('input[name=chkBox][value=1]').prop("checked", true).change();
// ----------------------------------------------
// 체크된것 감지하기
// ----------------------------------------------
$('input:checkbox[name="chkBox"]').change(function() {
console.log( '감지된 - 체크박스명:', this.name, ' id명:', this.id, ' 값:', this.value, ' 체크상태: ', this.checked );
});
console.log("\n");
});
</script>
최신버전에선 attr -> prop로 변경 되었습니다.