jQuery로 체크박스 제어하는 방법, 예제
jQuery를 사용하여 체크박스를 제어하는 방법에 대해 알아보겠습니다.
jQuery는 HTML 요소들을 쉽게 선택하고 조작할 수 있는 JavaScript 라이브러리입니다.
jQuery 라이브러리 추가하기
먼저, HTML 문서에서 jQuery 라이브러리를 추가해야 합니다. 다음과 같은 코드를 <head> 태그 내에 추가합니다:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
체크박스 선택하기
jQuery에서 요소들을 선택하려면 CSS 선택자를 사용합니다. 체크박스 요소들을 선택하기 위해서는 해당 체크박스의 ID나 클래스 등을 활용할 수 있습니다.
1. ID로 선택하기
만약 체크박스가 특정한 ID 값을 가지고 있다면, 다음과 같이 ID 선택자(#)를 사용하여 해당 체크박스를 선택할 수 있습니다:
let checkbox = $("#checkboxId");위 코드에서 checkboxId는 실제로 존재하는 체크박스의 ID 값으로 바꿔주셔야 합니다.
2. 클래스로 선택하기
여러 개의 체크박스가 동일한 클래스 이름으로 그룹화되어 있다면, 다음과 같이 클래스 선택자(.)를 사용하여 해당 그룹의 모든 체크박스들을 한 번에 선택할 수 있습니다:
let checkboxes = $(".checkboxClass");
3. 이벤트 처리하기
제이쿼리로 체크박스의 체크 및 언체크와 같은 동작에 대한 이벤트 처리도 간단하게 할 수 있습니다.
(1) change 이벤트 처리하기
체크 및 언체크 상태 변경 시 발생하는 change 이벤트를 처리하려면 다음과 같은 방식으로 작성할 수 있습니다:
$(document).ready(function() {
$("#checkboxId").change(function() {
if ($(this).is(":checked")) {
// checkbox가 체크된 경우 실행될 코드
} else {
// checkbox가 언체크된 경우 실행될 코드
}
});
});위 코드에서 checkboxId는 실제로 존재하는 체크박스의 ID 값으로 바꿔주셔야 합니다.
(2) click 이벤트 처리하기
클릭 동작으로 인해 발생하는 click 이벤트도 처리 가능합니다:
$(document).ready(function() {
$("#checkboxId").click(function() {
if ($(this).is(":checked")) {
// checkbox가 클릭되어 체그된 경우 실행될 코드
} else {
// checkbox가 클릭되어 언체그된 경우 실행될 코드
}
});
});위 코드에서 checkboxId는 실제로 존재하는 체크박스의 ID 값으로 바꿔주셔야 합니다.
마무리
제이쿼리를 사용하여 HTML 문서 내의 체크 및 언체크 동작을 간단하게 제어할 수 있습니다. 위 예시들 외에도 .prop() 메서드나 .attr() 메서드 등 다양한 방식으로도 제어 가능합니다.
제이쿼리에 관련된 더 많은 예시와 실전 활용 사례들은 공식 문서나 참고 자료들에서 확인하실 수 있으니 궁금한 점이 있다면 찾아보세요!
Happy coding! 😊
'vita_Programing' 카테고리의 다른 글
| Javascript로 체크박스의 체크여부를 확인하는 방법 (0) | 2023.10.27 |
|---|---|
| 부트스트랩의 SweetAlert 알림창 활용 및 예제 (0) | 2023.10.26 |
| 자바스크립트 join() 함수로 문자열을 합치는 방법 (0) | 2023.10.24 |
| 자바스크립트에서 + 연산자를 이용하여 문자열 합치기: 예제와 활용 방법 (0) | 2023.10.23 |
| 자바스크립트 concat() 함수로 문자열 합치기 예제 (0) | 2023.10.22 |
