[jQuery] is(':checked'), prop('checked') 비교해보기

최근 개발업무 중에 체크박스 컨트롤하는 일이 많아졌다.

체크박스 제어는 단순하지만 깔끔하고 효율적인 소스를 고민하다 보니 은근히 어렵다!

소스를 보던 중 같은 기능을 다른 형태로 사용하는 걸 발견해서 알아보기로 했다.

 

오늘의 주제는 체크 여부를 확인 할 수 있는 is(':checked')와 prop('checked')이다.

 

<input type="checkbox" name="chk" id="chkAll">
    <input type="checkbox" name="chk">
    <input type="checkbox" name="chk">
    <input type="checkbox" name="chk">

 

간략하게 input 태그만 있는 예제를 사용해보았다.

 

// 1개의 checkbox 체크 여부
$("#chkAll").is(":checked");
$("#chkAll").prop("checked");

// 여러개의 checkbox 체크 여부
$("input[name=chk]").is(":checked");
$("input[name=chk]").prop("checked");

 

id로 checkbox를 찾아서 체크 여부를 확인하는 것부터 테스트해봤다.

 

// 1개의 checkbox 체크 여부
$("#chkAll").is(":checked");	// true, false
$("#chkAll").prop("checked");	// true, false

 

한 개의 요소를 체크할 때 기능적으로 다른 점은 없다.

그래도 두 가지 방법 중 효율적인 한 가지만 사용하고 싶다 한다면?

단순 테스트로 속도를 측정해보자!

 

console.time("time");

for(var i=0; i<10000; i++) {
    $("#chkAll").is(":checked");	// case 1
    $("#chkAll").prop("checked");	// case 2
}

console.timeEnd("time");

// case 1 : 20 ~ 22 ms
// case 2 : 7 ~ 9 ms

 

비슷할 줄 알았지만 생각보다 명확한 숫자가 나와줬다.

100% 신뢰할 수 있는 테스트는 아니지만..

두 가지 방법 중 1개 요소의 체크 여부를 확인할 때는 prop('checked')가 좀 더 좋은 것을 확인할 수 있었다.

 

여러 요소의 체크 여부를 확인했을 때는 어떨까?

 

// 여러개의 checkbox 체크 여부

$("input[name=chk]").is(":checked"); 
// 0개 체크 : false, 1~4개 체크 : true

$("input[name=chk]").prop("checked"); 
// 0개 체크 : false, 1번 항목 체크 : true, 1번 제외 나머지 항목 체크 : false

 

테스트 결과.. 다른 점이 명확하다.

is(':checked')의 경우는 여러 개의 요소 중 1개 이상 체크될 경우 true를 반환한다.

prop('checked')의 경우는 여러 개의 요소 중 첫 번째 요소의 체크 여부만 확인하여 반환한다.

 

체크박스 중 한 개라도 선택했을 때 혹은 한 개도 선택하지 않았을 때 is(':checked')를 통해 구분할 수 있겠다.

 

var size = $("input[name=chk]").length;
var checked = $("input[name=chk]:checked").length

size == checked // 전체 선택
0 == checked // 선택 안함

 

추가로 위와 같은 예제처럼 전체 선택했을 때와 하지 않았을 때를 구분 할 수도 있겠다.

 

체크박스 컨트롤에 대한 단순하지만 헷갈리는 부분을 정리해보았다.

한 개의 요소일 때와 여러 개의 요소일 때 효율적인 방법을 찾아봤으니 앞으로 체크박스 관련 업무는 문제없겠다.