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

  2. 어떻게
  3. jQuery 하우투
  4. jQuery로 체크박스가 체크되어 있는지 확인
Ankit Raj Goyal 2024년2월15일
jQuery jQuery Checkbox
  1. .get() 메서드를 사용하여 직접 DOM 작업으로 확인란이 선택되어 있는지 확인
  2. .prop() 메서드로 확인란이 선택되어 있는지 확인
  3. .is() 메서드로 확인란이 선택되어 있는지 확인
  4. jQuery로 체크박스가 선택되었는지 확인하는 일반적인 사용 사례
jQuery로 체크박스가 체크되어 있는지 확인

이 블로그 게시물에서 jQuery 확인란을 선택하는 몇 가지 방법을 배울 것입니다. 또한 각 사용 사례에 가장 적합한 방법을 선택할 수 있도록 성능 메트릭에 대해 설명합니다.

일반적인 확인란 사용 사례에 대한 유용한 바로 가기를 보여줍니다. 우리는 또한 사람들이 흔히 범하는 오류에 대한 문제가 있습니다.

.get() 메서드를 사용하여 직접 DOM 작업으로 확인란이 선택되어 있는지 확인

jQuery를 사용하면 .get() 메서드를 사용하여 각 jQuery 객체 아래의 DOM 노드에 액세스할 수 있습니다. 그런 다음 이 DOM 노드를 쿼리하여 다른 속성에 직접 액세스/설정할 수 있습니다.

$("button").on("click",function(){
    $("p").html(`<p>
    ${$("input[name='checkboxArray']").get(0).checked?'The first box is checked':'The first box is not checked'}
    // <p/>`);
});

아래에서 이 코드의 작동 데모를 볼 수 있습니다.

직접 DOM 작업으로 확인란이 선택되어 있는지 여부

이 코드를 분해해 보겠습니다. (코드를 더 잘 이해하려면 첨부된 HTML 및 CSS 파일을 참조하십시오.)

체크 이벤트를 트리거하는 버튼을 선택하고 click 이벤트에 대한 콜백을 여기에 첨부합니다. 콜백에서 p 요소에 텍스트로 추가하여 검사 결과를 표시합니다. jQuery .html() 메서드를 사용합니다.

이 jQuery 메서드는 여기에서 우리가 원하는 사용 사례인 이전 텍스트를 덮어씁니다. 우리는 모든 새로운 검사에 대해 새로운 HTML 출력을 원합니다.

주요 검사 로직은 .html() 메소드에 전달하는 라인에 있습니다. 먼저 jQuery 객체에서 name = 'checkboxArray'인 모든 입력 요소를 선택합니다.

선택기는 jQuery 객체만 반환하며 기본 DOM 노드에는 아직 액세스할 수 없습니다.

그러나 우리는 .get(0)과 같이 .get 메소드를 연결합니다. 이제 jQuery 선택 컬렉션의 첫 번째 DOM 노드에 액세스할 수 있습니다.

첫 번째 확인란이 선택되었는지 확인하고 .get() 메서드에 대한 인수로 0을 전달하여 첫 번째 DOM 노드에 액세스합니다.

이제 jQuery에 대한 .checked 속성에 직접 액세스하여 확인란이 선택되었는지 확인할 수 있습니다.

프로 팁 1:

위에서 액세스한 .checked 속성은 DOM 노드에 연결된 JavaScript 속성(또는 기술적으로 IDL 속성)입니다. HTML 요소의 초기 또는 기본 선택/선택 해제 값(기술적으로 HTML 콘텐츠 속성)만 표시하는 HTML checked 속성과 다릅니다.

이 블로그 게시물의 뒷부분에서 이 차이점을 자세히 살펴보겠습니다.

프로 팁 2:

직접 DOM 작업은 매우 빠릅니다. 따라서 이 방법을 사용하면 jQuery를 사용하여 확인란이 우수한 성능으로 선택되어 있는지 확인할 수 있습니다.

역참조 연산자를 사용하여 직접 DOM 작업으로 확인란이 선택되어 있는지 바로 가기 확인

각 jQuery는 배열 객체처럼 작동합니다. 따라서 우리는 이 동작을 유지하고 .get 메서드 대신 짧은 배열 역참조 연산자 []를 사용하여 일부 코드를 줄일 수 있습니다.

$("button").on("click",function(){
    $("p").html(`<p>
    // ${$("input[name='checkboxArray']")[0].checked?'The first box is checked':'The first box is not checked'}
    // <p/>`);
});

코드는 역참조 연산자를 사용하는 것을 제외하고 위와 동일합니다. ... $("input[name = 'checkboxArray']")[0]... .

.prop() 메서드로 확인란이 선택되어 있는지 확인

또한 jQuery .prop() 메서드를 사용하여 DOM 노드에 직접 액세스하는 대신 요소에서 기본 JavaScript 속성을 추출할 수 있습니다.

$("button").on("click",function(){
    $("p").html(`<p>
    ${$("input[name='checkboxArray']").prop('checked')?'The first box is checked':'The first box is not checked'}
    <p/>`);
});

아래에서 이 코드의 작동 데모를 볼 수 있습니다.

.prop() 메서드를 사용하여 확인란이 선택되었는지 확인합니다

대부분의 코드는 위와 비슷합니다. 다음과 같은 주요 차이점이 있는 행을 살펴보겠습니다.

 $("input[name='checkboxArray']").prop('checked')...

위에서 동일한 .checked 속성을 추출했지만 여기서는 jQuery .prop() 메서드를 사용합니다.

프로 팁:

jQuery .prop() 메서드를 사용하는 이유는 무엇입니까? jQuery .prop() 메서드도 빠른 작업입니다(다음에 볼 선택기 기반 메서드와 비교).

JavaScript 또는 jQuery와 같은 JS 기반 라이브러리를 사용하여 DOM 요소 속성을 쿼리하는 것이 좋습니다.

.is() 메서드로 확인란이 선택되어 있는지 확인

:checked 선택기와 .is() 메서드를 결합하여 jQuery를 사용하여 확인란이 선택되었는지 확인합니다.

:checked 선택기는 선택되거나 선택된 모든 요소를 ​​반환합니다. 체크박스의 경우 체크된 체크박스를 선택한다는 의미입니다.

$("some selector:checked");

// returns those elements that are checked

:checked 선택기에 대한 자세한 내용은 여기를 참조하세요.

.is() 메소드는 jQuery 객체를 선택자와 일치시키고 해당 선택자와 일치하면 true를 반환합니다.

$("some jQuery object").is("some_selector");

//returns true if the jQuery object matches the selector

.is() 메서드에 대한 자세한 내용은 여기를 참조하세요.

jQuery로 체크박스가 체크되어 있는지 확인하기 위해 둘을 하나의 코드로 결합해보자.

$("button").on("click",function(){
    $("p").html(`<p>
    ${$("input[id='#first']").is(":checked")?'The first box is checked':'The first box is not checked'}
    <p/>`);
});

아래에서 이 방법의 데모를 시청하세요.

jQuery 선택기로 확인란이 선택되어 있습니까?

이벤트 핸들러 및 콜백을 설정하는 코드는 이전 방법과 유사합니다. 주요 변경 사항은 다음과 같이 검사 구현에 있습니다.

$("input[id = '#first']").is(":checked")...

.is() 메서드는 :checked 선택기를 인수로 전달하기 때문에 첫 번째 id가 있는 확인란이 선택되어 있으면 true를 반환합니다.

프로 팁:

is() 메소드는 새 jQuery 객체를 만들거나 원래 객체를 제자리에서 수정하지 않습니다. 이 동작으로 인해 콜백 및 이벤트 핸들러에서 사용하는 것이 이상적입니다.

jQuery로 체크박스가 선택되었는지 확인하는 일반적인 사용 사례

이제 기본 방법을 보았으므로 일반적인 사용 사례를 위해 미리 만들어진 몇 가지 빠른 스크립트를 작성해 보겠습니다.

요소의 ID를 사용하여 확인란이 선택되어 있는지 확인

다음 코드와 함께 요소의 ID를 사용하여 확인할 수 있습니다.

$("button").on("click",function(){
    $("p").html(`<p>
    ${$("input[id='#second']").is(":checked")?'The second box is checked':'The secong box is not checked'}
    <p/>`);
});

속성 같음 선택기를 사용하여 ID 초가 있는 확인란을 선택하고 id='#second'옵션을 전달합니다.

아래에서 작동 데모를 볼 수 있습니다.

요소 ID로 확인란이 선택되어 있는지 여부

클래스를 사용하여 확인란이 선택되어 있는지 확인

공통 클래스가 있는 체크박스 그룹을 선택하여 체크되어 있는지 확인할 수도 있습니다. 코드는 매우 간단합니다.

$("button").on("click",function(){
    $("p").html(' ');
    $("input[class='non-first']").each(function(){
        $("p").append(`
        ${$(this).is(":checked")? 'The ' + $(this).attr("id") + ' box is checked':'The ' + $(this).attr("id") +' box is not checked'}
        <br> `);
    });
});

첫 번째 클래스가 아닌 모든 확인란을 선택한 다음 .each() 메서드를 사용하여 각 확인란을 반복합니다. 마지막으로 각 반복에 대한 검사를 실행하고 p 요소에 출력을 추가합니다.

이전 반복의 출력을 덮어쓰고 싶지 않기 때문에 이 사용 사례에서는 append() 메서드를 사용합니다.

아래에서 작업 데모를 볼 수 있습니다.

클래스를 사용하여 확인란이 선택되어 있는지 여부

jQuery로 체크한 경우 체크박스 체크 해제

jQuery로 체크된 체크박스를 체크 해제하기 위해 다음 스니펫을 사용합니다:

$("button").on("click",function(){
    // To find the checked boxes by ID
    let $checkedBox = $("input[id ='first']");
    // To run the check and toggle if the checkbox is checked
    if ($checkedBox.is(':checked')){
        $checkedBox.prop("checked", false);
    }
});

여기서 .prop() 메서드의 set 형식을 사용합니다.

$(some_jQuery_object).prop("checked",false);

// sets the "checked" property to false for the selected jQuery object

여기에서 이 스니펫의 작업 데모를 볼 수 있습니다.

선택한 경우 확인란을 선택 취소합니다

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

다음 상용구를 사용하여 주어진 컬렉션의 모든 확인란이 선택되었는지 확인할 수 있습니다.

$("button").on("click",function(){
    let result = true;
    // To find the list of checked boxes in an array of related checkboxes
    let $checkedList = $("input[name='checkboxArray']");
    // To iterate and do something with each checked box on the list above
    // Here we display info related to them in the DOM
    $checkedList.each(function(){
    if (!($(this).is(":checked"))){
        result = false;
    }
    });
    // to display the number of checked boxes
    $("p").html(`All checkboxes are ${result?'':'not'} checked`);
});

여기에서 스니펫의 작동 데모를 볼 수 있습니다.

모든 체크박스가 체크되어 있는지 확인

이 코드의 논리를 분석해 보겠습니다.

위와 같이 이벤트 핸들러를 연결하고 컬렉션의 각 체크 박스를 반복합니다. 그런 다음 각 확인란에서 .each() 함수를 실행하고 확인란이 선택되지 않은 경우 result 변수를 false로 변경합니다.

마지막으로 결과를 출력합니다.

jQuery를 사용하여 주어진 컬렉션에서 확인란이 선택되어 있는지 확인하십시오.

다음 코드로 체크박스 중 하나 이상이 선택되었는지 확인할 수 있습니다.

$("button").on("click",function(){
    let result = false;
    // To find the list of checked boxes in an array of related checkboxes
    let $checkedList = $("input[name='checkboxArray']");
    // To iterate and do something with each checked box on the list above
    // Here we display info related to them in the DOM
    $checkedList.each(function(){
    if ($(this).is(":checked")){
        result = true;
    }
    });
    // to display if any (at least) one of the checkboxes is checked
    $("p").html(`At least one checkbox in the given collection is ${result?'':'not'} checked`);
});

먼저 아래 작업 데모와 함께 작동하는 방법을 살펴보겠습니다.

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

논리는 간단합니다. 컬렉션의 모든 확인란에 대해 확인을 실행하고 확인란 중 하나라도 선택되어 있으면 result 변수를 true로 변경합니다.

그렇지 않으면 result 변수의 값을 false로 유지하고 그에 따라 메시지를 출력합니다.

jQuery로 확인란이 선택 해제된 경우 제출 버튼 비활성화

특정 체크박스가 선택되지 않은 경우 제출 버튼을 비활성화하는 간단한 스니펫을 작성할 수 있습니다.

$("button").on("click",function(){
    // To find the specific checkbox
    let $checkedBox = $("input[id='third']");
    let $submitBtn = $("input[name='submitBtn']");
    if ($($checkedBox).is(":checked")){
        $submitBtn.prop("disabled",false);
    }
    else {
        $submitBtn.prop("disabled",true);
    }
});

아래에서 이 솔루션의 출력을 볼 수 있습니다.

확인란이 선택되지 않은 경우 제출 버튼 비활성화

논리는 간단합니다. 위의 방법과 마찬가지로 .is() 메서드와 :checked 선택기로 확인란이 선택되었는지 확인합니다.

체크박스를 선택하면 submitBtn 요소의 disabled 속성을 false로 설정합니다. 그렇지 않으면 true로 설정합니다.

jQuery로 확인란이 선택되었는지 확인하기 위한 .attr() 메서드의 더 이상 사용되지 않음

HTML 속성은 DOM 속성과 다릅니다. 많은 경우 속성이 HTML 속성과 일치하지만 항상 그런 것은 아닙니다.

확인란의 경우와 마찬가지로 HTML checked 속성은 요소의 기본 또는 초기 선택/선택 취소 상태를 나타내는 표시일 뿐입니다. 요소의 현재 선택/선택 해제 상태를 표시하는 checked DOM 속성과 일치하지 않습니다.

jQuery .attr() 메서드는 HTML 속성만 참조합니다. 따라서 이 방법을 사용하여 확인란이 선택되어 있는지 확인하면 안 됩니다.

이전에는 jQuery를 사용하여 이 작업을 수행할 수 있었지만 버전 1.6에서는 .prop() 메서드가 DOM 속성에 명시적으로 액세스하기 위해 추가되고 .attr()이 HTML 속성으로만 제한되었을 때 동작이 변경되었습니다.

jQuery가 속성과 속성을 다르게 처리하는 방법에 대해 자세히 읽을 수 있습니다여기.

관련 문장 - jQuery Checkbox