reProject_27_체크박스 전체선택/전체해제 버튼으로 처리하기

reProject_26_관리자 상품관리 페이지

2024.01.18

체크박스 기능을 버튼을 사용하여 작업하려고함. 전체선택으로 보여지고 전체선택한 경우 전체해제로 보여지도록 작업

 

checkbox.js

/**
 * 전체선택/해제 버튼으로 체크
 */
 $(document).ready(function(){
    // 전체선택
    $("#checkAll").click(function(){
        if($(this).hasClass("checkAll")){    // 전체선택
            $(this).removeClass("checkAll").addClass("uncheckAll").addClass("active");
            $(this).text("전체해제");
            $(".check").prop("checked", true);
        } else if($(this).hasClass("uncheckAll")){    // 전체해제
            $(this).removeClass("active").removeClass("uncheckAll").addClass("checkAll");
            $(this).text("전체선택");
            $(".check").prop("checked", false);
        }
    });
    
    // 전체선택(부가)
    $(".check").click(function(){
        if($(".check:checked").length < $(".checklist .check").length){    // 전체선택 아닌 경우
            $("#checkAll").removeClass("uncheckAll").removeClass("active").addClass("checkAll");
            $("#checkAll").text("전체선택");
        } else { // 전체선택인 경우
            $("#checkAll").removeClass("checkAll").addClass("uncheckAll").addClass("active");
            $("#checkAll").text("전체해제");
        }
    });
});
 

 

>> 실행

 

>>> 전체선택 클릭시

 

>> 체크박스 하나라도 해제

 

reProject_28_상품 등록 페이지/상품 상세 페이지/삭제/수정