jQuery로 선택된 체크박스 값 가져오는 방법 (:checked 선택자 활용)

네, jQuery를 사용하면 input 요소를 기반으로 선택된 체크박스의 값을 손쉽게 가져올 수 있습니다. 핵심은 :checked 선택자를 함께 사용하는 것입니다. 이 선택자를 이용하면 현재 체크된 상태의 체크박스만 필터링할 수 있습니다.

핵심 동작 원리

input[name="checkDemo"] — 특정 name 속성을 가진 체크박스 그룹을 선택합니다.
:checked — 그중에서 실제로 체크된 요소만 걸러냅니다.
.each() — 선택된 각 체크박스를 순회하며 this.value로 값을 읽어옵니다.

예제 코드

다음은 전체 코드입니다 −

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
   <input type="checkbox" name="checkDemo" id="check1" value="Cricket" />
   <label for="check1">Cricket</label>
   <input type="checkbox" name="checkDemo" id="check2" value="Listening Music" />
   <label for="check2">Listening Music</label>
<input type="checkbox" name="checkDemo" id="check3" value="Reading NewsPaper" />
<label for="check3">Reading NewsPaper</label>
<br>
<button type="button">Click Me</button>
<script>
   $(document).ready(function () {
      $("button").click(function () {
         $('input[name="checkDemo"]:checked').each(function () {
            console.log(this.value);
         });
      });
   });
</script>
</html>

실행 방법

위 프로그램을 실행하려면 파일 이름을 anyName.html(index.html)로 저장한 뒤, 해당 파일을 마우스 오른쪽 버튼으로 클릭하세요. 그다음 VS Code 편집기에서 “Open with live server” 옵션을 선택하면 브라우저에서 바로 확인할 수 있습니다.

실행 결과

프로그램을 실행하면 다음과 같은 화면이 출력됩니다 −

jQuery로 선택된 체크박스 값 가져오는 방법 (:checked 선택자 활용)

이제 체크박스를 선택해 보세요 −

jQuery로 선택된 체크박스 값 가져오는 방법 (:checked 선택자 활용)

버튼을 클릭하면 콘솔에 다음과 같이 선택된 체크박스의 값이 출력됩니다 −

jQuery로 선택된 체크박스 값 가져오는 방법 (:checked 선택자 활용)

정리

이처럼 jQuery에서는 :checked 선택자와 .each() 메서드를 조합하면 여러 개의 체크박스 중 사용자가 선택한 항목의 값을 간단하게 추출할 수 있습니다. 폼 제출 전 유효성 검사나 다중 선택 항목 처리 등 다양한 상황에서 유용하게 활용할 수 있습니다.