jQuery를 사용하여 체크박스를 선택하거나 선택 해제했을 때 특정 섹션을 활성화(표시)하거나 비활성화(숨김)하려면 아래 방법을 사용할 수 있습니다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkbox Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#section {
display: none; /* 초기에는 숨김 */
margin-top: 10px;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<label>
<input type="checkbox" id="toggleCheckbox"> Show Section
</label>
<div id="section">
<p>This is the section that will be shown or hidden based on the checkbox.</p>
</div>
<script src="script.js"></script>
</body>
</html>
jQuery 스크립트 (script.js)
$(document).ready(function () {
$('#toggleCheckbox').change(function () {
if ($(this).is(':checked')) {
// 체크박스가 선택된 경우 섹션 표시
$('#section').slideDown();
} else {
// 체크박스가 해제된 경우 섹션 숨김
$('#section').slideUp();
}
});
});
동작 방식
- 체크박스 이벤트 감지
- $('#toggleCheckbox').change()는 체크박스의 상태가 변경될 때 호출됩니다.
- 체크 여부 확인
- $(this).is(':checked')를 사용하여 체크박스가 선택되었는지 확인합니다.
- 섹션 활성화/비활성화
- 체크박스가 선택되었으면 $('#section').slideDown()으로 섹션을 표시합니다.
- 체크박스가 해제되었으면 $('#section').slideUp()으로 섹션을 숨깁니다.
- 애니메이션
- slideDown()과 slideUp()은 부드러운 애니메이션 효과를 제공합니다.
- 필요에 따라 show()와 hide()로 변경할 수 있습니다.
추가 옵션
1. 여러 섹션 관리
<label><input type="checkbox" class="toggle" data-target="#section1"> Section 1</label>
<label><input type="checkbox" class="toggle" data-target="#section2"> Section 2</label>
<div id="section1" style="display: none;">Content for Section 1</div>
<div id="section2" style="display: none;">Content for Section 2</div>$(document).ready(function () {
$('.toggle').change(function () {
let target = $(this).data('target');
if ($(this).is(':checked')) {
$(target).slideDown();
} else {
$(target).slideUp();
}
});
});
2. 활성화/비활성화와 함께 입력 필드 제어
$(document).ready(function () {
$('#toggleCheckbox').change(function () {
if ($(this).is(':checked')) {
$('#section input').prop('disabled', false); // 활성화
$('#section').slideDown();
} else {
$('#section input').prop('disabled', true); // 비활성화
$('#section').slideUp();
}
});
});
#jquery #change() #slideDown() #slideUp() #prop() #event #활성화/비활성화
반응형
'프로그램' 카테고리의 다른 글
| jquery 텍스트 필드 값 변경 시 유효성 검사 (0) | 2024.12.01 |
|---|---|
| jquery 라디오 버튼으로 입력 폼 변경 (0) | 2024.11.29 |
| jquery 드롭다운 메뉴에서 선택에 따라 내용 변경 (0) | 2024.11.26 |
| jQuery의 change() 이벤트를 활용한 실용적인 예제들 (0) | 2024.11.24 |
| jQuery의 keydown() / keyup() / keypress() 이벤트를 활용한 실용적인 예제들 (0) | 2024.11.23 |
댓글