jQuery 체크박스 전체선택/해제하기(attr/prop 차이)

출처  :  smujihoon.tistory.com/82

 

요즘 세미프로젝트를 진행하고 있는 와중에 페이지에서 정말 많이 쓰이는 기능중 하나인 checkbox를 한번에 전체 선택/해제하는 방법을 포스팅할 예정이다. 코드 자체는 그렇게 복잡하지 않다.

 

<table border="1" align="center">

<tr>

<th><input type="checkbox" id="checkAll" onclick="cAll();"><label for="c0">전체약관동의

</tr>

<tr>

<th><input type="checkbox" id="c1" required><label for="c1">이용약관(필수)...

target="_blank">약관정보</a><br>

<input type="checkbox" id="c2" required><label for="c2">개인정보처리 동의(필수)...

target="_blank">약관정보</a><br>

<input type="checkbox" id="c3" required><label for="c3">개인정보 제3자 제공 동의...

target="_blank">약관정보</a><br>

<input type="checkbox" id="c4"><label for="c4">이벤트혜택 알림 수신동의(선택)...

</tr>

</table><br>

 

우선 사용할 checkbox는 이렇게 구성하였다. 이제 checkAll 이라는 친구로 아래 항목들을 한번에 체크/해제를 해볼 것이다.

 

function cAll() {

if ($("#checkAll").is(':checked')) {

$("input[type=checkbox]").prop("checked", true);

} else {

$("input[type=checkbox]").prop("checked", false);

}

}

 

전체선택 박스를 클릭하면 cAll() 이라는 함수가 실행이되며 체크된 여부를 판별하여 체크가 된 상태면 아래 항목들을 input[type=checkbox]  이라는 선택자로 선택하고 그 속성들을 변경 해주는 prop()를 사용해 checked를 true/false를 해줘서 체크/해제가 가능하도록 만들어준다.

속성을 추가하는 방법에는 attr()도 있는데 attr()을 사용하면 처음 한번은 체크가 잘되고 해제되지만 이후엔 발동하지않는다.

 

왜냐하면 HTML의 속성값을 취급하고 싶을경우엔 attr() 사용하고 자바스크립트의 것을 사용할 땐 prop()를 사용해야하기 때문이다. 사실 이 두개는 기능적으로 비슷하기 때문에 구별하기가 어렵다. 자주 사용함으로써 감으로 써야할것 같다. 나같은 초보자들은 attr 써보고 안되면 prop를 쓰는것도 좋은 방법이지 않을까 생각해본다.