html checkBox 전체 선택 및 해제

제이쿼리(jQuery)로 html checkBox 전체 선택 및 해제

전체선택을 하는 checkBox의 html id가 필요하고

그 외의 checkBox의 html id의 규칙이 필요하다.

// html id가 "chkAll"이라는 엘리먼트를 클릭시

$("#chkAll").click(function(){

        // 해당 체크박스의 checked 값이 true 이면
        if( $(this).is(":checked") ){

            // html id가 "chk_"으로 시작하는 모든 체크박스의  checked 값을 true로 변경한다.
            $("input[id^=chk_]:checkbox:not(:disabled)").prop("checked", true);
       

        } else {
          

            // html id가 "chk_"으로 시작하는 모든 체크박스의  checked 값을 false로 변경한다.

            $("input[id^=chk_]:checkbox:not(:disabled)").prop("checked", false);
        }

    }); 

추가 이야기 :

jquery에서 체크박스의 상태를 prop이용하지 않고 attr를 사용해서 변경할려는 방법은 잘못된 방법이다.

특정 경우에 따라서 attr가 정상적으로 작동하지 않는 버그가 발생할 수 있다.

.attr()는 HTML의 속성을 취급
.prop()는 JavaScript 프로퍼티를 취급