jQuery로 체크박스가 체크되어 있는지 확인

jQuery에서 체크박스의 현재 상태를 확인하려면 DOM의 checked 속성을 읽습니다. 직접 값을 읽을 때는 .prop('checked'), 선택자를 사용해 확인할 때는 .is(':checked')를 쓰거나, 선택된 DOM 노드에 .get(0).checked 또는 [0].checked로 접근할 수 있습니다. HTML의 checked 속성은 체크박스의 초기 상태를 나타내며, 사용자가 나중에 변경한 상태를 추적하지는 않습니다. (.get())

DOM에 직접 접근해 체크박스가 선택되었는지 확인하기

jQuery 선택 결과는 일치하는 요소들의 컬렉션입니다. .get(0)은 그중 첫 번째 기본 DOM 요소를 반환하며, 해당 요소의 checked 속성은 현재 상태를 불리언 값으로 나타냅니다. 배열처럼 [0]으로 접근해도 같은 요소를 얻습니다. 확인하려는 체크박스가 선택 결과에 포함되어 있을 때만 두 방법 중 하나를 사용하세요.

다음 예제를 실행해 보세요:

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

const checkbox = { checked: true };
console.log(checkbox.checked ? "Checked" : "Not checked");

Checked

jQuery가 로드된 페이지에서는 $("#terms").get(0).checked로 같은 상태를 확인할 수 있습니다. 다음 브라우저 소스에는 체크박스와 버튼을 사용한 패턴이 나옵니다. 이는 페이지 소스이며 실행 결과는 아닙니다.

<!doctype html>
<html lang="en">
<body>
  <label><input id="terms" type="checkbox"> Accept the terms</label>
  <button id="check" type="button">Check state</button>
  <p id="result" aria-live="polite"></p>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("#check").on("click", function () {
      const isChecked = $("#terms").get(0).checked;
      $("#result").text(isChecked ? "The box is checked." : "The box is not checked.");
    });
  </script>
</body>
</html>

여러 요소가 일치할 수 있는 선택 결과에서도 .get(0)은 첫 번째 요소만 반환합니다. 일치하는 요소가 없으면 인덱스 0에서 읽을 체크박스가 없습니다. 일치하는 요소를 모두 확인하려면 컬렉션을 반복하거나, 하나라도 일치하는지 확인하려면 .is(':checked')를 사용하세요.

.prop()으로 체크박스가 선택되었는지 확인하기

선택한 요소의 현재 체크 상태를 읽으려면 .prop('checked')를 사용합니다.

$("#terms").prop("checked")

체크박스 하나를 선택한 경우, getter는 체크되어 있으면 true, 그렇지 않으면 false를 반환합니다. jQuery 컬렉션에 요소가 여러 개 있으면 getter는 첫 번째로 일치한 요소의 속성을 읽습니다. 특정 체크박스의 상태를 확인해야 한다면 그 요소를 구체적으로 선택하세요.

setter 형식은 현재 상태를 바꿉니다. $("#terms").prop("checked", true)는 체크하고, false를 전달하면 체크를 해제합니다. 현재 상태를 알아보려면 getter를 사용하고, 상태를 바꾸려면 setter를 사용하세요. 같은 속성 접근 방식은 버튼의 disabled처럼 다른 폼 컨트롤의 현재 속성에도 적용됩니다. 자세한 내용은 jQuery .prop() 문서를 참고하세요.

.is()와 :checked로 체크박스가 선택되었는지 확인하기

:checked 선택자는 체크된 체크박스와 라디오 버튼을 찾습니다. 자세한 내용은 jQuery 선택자 문서를 참고하세요. .is(':checked')는 선택된 jQuery 컬렉션에서 이 선택자와 일치하는 요소가 하나 이상 있는지 불리언 값으로 반환합니다. .is() 문서에서 자세히 확인할 수 있습니다.

$("#terms").is(":checked")

선택한 체크박스가 체크되어 있는지 묻는 경우 읽기 쉬운 표현입니다. 예를 들어 $("input[name='choice']").is(":checked")는 이름이 같은 그룹에서 체크된 체크박스가 하나라도 있으면 true입니다. 반면 $("input:checked") 선택자는 체크된 모든 입력 요소를 담은 jQuery 컬렉션을 만듭니다. 그 자체로 불리언 값을 반환하지는 않습니다.

ID를 선택할 때 속성값 안에는 해시 기호를 넣지 마세요. $("#terms") 또는 $("input[id='terms']")를 사용하고, $("input[id='#terms']")는 사용하지 않습니다. #은 ID 선택자 문법에 속하며 요소의 id 속성값에는 포함되지 않습니다.

jQuery를 사용하는 일반적인 체크박스 활용 사례

다음 패턴은 현재 checked 속성을 사용하며, 필요에 따라 고유 ID, 클래스, 폼 구조에 맞게 바꿔 쓸 수 있습니다.

ID 또는 클래스로 선택하기

확인할 체크박스가 하나라면 ID를 사용합니다. $("#terms").prop("checked")처럼 쓸 수 있습니다. 여러 체크박스가 같은 클래스를 공유한다면 일치하는 요소를 반복해 각 상태를 확인하세요.

예를 들어 $(".option").each(function () { console.log(this.id + ": " + (this.checked ? "checked" : "not checked")); });는 일치하는 요소를 하나씩 처리합니다. 페이지에서는 체크박스 입력 요소에 해당 클래스가 지정되어 있고, 요소가 만들어진 뒤 코드가 실행되는지 확인하세요. .each() 안의 this는 현재 DOM 요소이므로, 그 checked 속성이 해당 체크박스의 상태를 나타냅니다.

체크된 경우에만 체크 해제하기

컨트롤을 체크 해제된 상태로 만들기만 하면 setter로 바로 설정할 수 있으므로, 미리 상태를 확인할 필요는 없습니다.

$("#terms").prop("checked", false)

이미 체크된 경우에만 다른 동작을 해야 한다면 먼저 if ($("#terms").is(":checked")) { ... }로 확인한 다음 속성을 false로 설정하세요.

컬렉션의 모든 항목 또는 일부 항목이 체크되었는지 확인하기

그룹에 .is(':checked')를 사용하면 일치하는 항목 중 하나라도 체크되었는지 알 수 있습니다. 모든 항목이 체크되었는지 확인하려면 체크된 항목 수와 그룹 체크박스 전체 수를 비교하세요.

예를 들어 const $options = $("input.option[type='checkbox']"); const allChecked = $options.length > 0 && $options.filter(":checked").length === $options.length; const anyChecked = $options.is(":checked");로 두 결과를 계산할 수 있습니다.

length > 0 조건은 선택자와 일치하는 체크박스가 없을 때 ‘모두 체크됨’을 false로 처리합니다. 폼 그룹에서는 보통 이 해석이 유용합니다. 애플리케이션에 명시적으로 다른 빈 그룹 정책이 필요하다면 그에 맞게 선택하세요.

체크박스 상태에 따라 제출 버튼 활성화하기

비활성화된 버튼을 클릭할 때까지 기다리지 말고 체크박스 상태가 바뀔 때 버튼을 업데이트하세요.

예를 들어 const update = () => $("#submit").prop("disabled", !$("#terms").is(":checked"));를 정의하고, $("#terms").on("change", update)로 이벤트를 연결한 뒤 update()를 한 번 호출하세요. 이렇게 하면 페이지가 로드될 때 초기 상태가 적용되고 사용자가 체크박스를 바꿀 때마다 버튼 상태가 동기화됩니다. #submit은 폼의 실제 제출 컨트롤에 맞게 바꾸세요.

HTML의 checked 속성은 페이지가 초기화될 때 체크박스의 기본 체크 상태를 설정합니다. DOM의 checked 속성은 사용자 조작이나 스크립트 변경 이후의 현재 상태를 반영합니다. .attr('checked')는 HTML 속성을 읽습니다. 현재 상태가 필요하면 .prop('checked') 또는 .is(':checked')를 사용하세요. 따라서 체크박스에서 .attr()과 .prop()은 서로 다른 질문에 답합니다.