[jQuery]prop("checked") 와 is(":checked")의 차이는 무엇일까?

 

---

 

💡

오늘은 체크박스에서 체크여부를 확인하거나 컨트롤할 때 유용하게 쓰이는

prop("checked")와  is(":checked")의 차이점을 알아보겠습니다.

 

👀이전 포스팅

https://yeonzzy.tistory.com/21

[jQuery] attr()과 prop()의 차이점은 무엇일까?

 

---

 

prop("checked")   VS   is(":checked")

jQuery 1.6.0 이상을 사용하는 경우  prop("checked") 가 가장 직접적인 jQuery 방식이며 단순히 속성을 직접 확인하는 것이 아니라 몇 가지 수준의 간접적인 작업을 먼저 수행한다.

- Webkit의 브라우저에서는 요소가 선택자와 일차하는지 테스트하는 기능을 제공하고 기본적으로 :checked를 지원하므로 webkit 브라우저에서는 상당히 직접적.

- Firefox와 IE에서는 간단한 선택기가 sizzle용기를 통해 작동하여 엄청난 수의 함수 호출이 발생.

 

그렇다면 두 방식의 어떤 타입을 반환할까?

<!-- .html -->
<input type="checkbox" id="example" checked">example

 

위의 html에서 checked속성을 주었기때문에 checkbox는  true  값을 반환한다.

// .js
var chk = $("input[type=checkbox]");
        
console.log(chk.prop("checked"));   //true
console.log(chk.is(":checked"));    //true

 

jQuery.type()로 반환되는 값의 타입(type)을 확인하면 두 개의 방식 모두  boolean  타입을 갖는다.

// 타입(type) 확인
console.log(jQuery.type(chk.prop("checked")));  //boolean
console.log(jQuery.type(chk.is(":checked")));  //boolean

 

체크박스는 단일로 처리되는 경우도 있지만, 전체 체크박스가 하위의 체크박스를 함께 처리할 경우를 많이 볼 수 있다.

그렇다면 전체 체크박스 처리는 어떻게 할까?

// 체크박스 .html
<input type="checkbox" id="chkCtrl"> 전체 선택 <br>
<input type="checkbox" name="chk">선택 1
<input type="checkbox" name="chk">선택 2
<input type="checkbox" name="chk">선택 3

 

이렇게 html을 작성하고  prop("checked") 와  is(":checked") 를 사용하여 전체선택박스를 컨트롤 해보았다.

// .js
var chkList = $("input[name=chk]");

$("#chkCtrl").click(function(){
	if($(this).is(":checked")){
		chkList.prop("checked", true);
	}else
		chkList.prop("checked", false);
});

 

결과

 

좀 더 간략하게 작성할 수 있는 방법 중 삼항연산자를 이용하는 방법이 있는데,

이건 다음 포스팅에서 알아보겠다!