개발/기타

jquery checkbox 제어하기(2)

xwing 2009. 4. 21. 13:13
지난 번(가기)에 이어 이번엔 간단하게
웹페이지에 있는 모든 체크박스를 모두 체크하고 모두해제하는 간단한 함수를 만들어 보자

$(document).ready(function() {

    $("#ckAll").click(function() {
        if ($("#ckAll:checked").length > 0) {
            $("input:checkbox:not(checked)").attr("checked", "checked");
        } else {
            $("input:checkbox:checked").attr("checked", "");
        }

    });
});

<input type='checkbox' id='ckAll' /><label for='ckAll'>모두체크/해제</label>

위와 같은 체크박스가 있고 아래로 주주룩 체크박스들이 있다고 하자
위의 소스는 #ckAll 체크박스의 click 이벤트를 잡아서 동작한다.

만약에 #ckAll 이 체크되었으면        /
if ($("#ckAll:checked").length > 0) /
모든 체크안된 체크박스를 체크하며 /
$("input:checkbox:not(checked)").attr("checked", "checked"); / (어트리뷰트에 checked='checked'를 추가한다.)
#ckAll 이 체크가 안되어 있으면
모든 체크된 체크박스를 체크해제한다. /
$("input:checkbox:checked").attr("checked", ""); /

이해가 가시죠~..
좋은 하루 되세요^^

jQuery로 checkbox 제어(1)