상세 컨텐츠

본문 제목

전체체크 / 부분체크 addClass, removeClass 조건식 넣기

Javascript

by 모모87 2021. 4. 26. 11:34

본문

// begin::thumbnail 클릭시 check 활성화 
$('.doc_list__box .doc_list__block').on('click', function () {
    $(this).children('.lb_01').attr('checked', function () {
        return !$(this).attr('checked');
    });
    $(this).toggleClass('checked');
});
// end::thumbnail 클릭시 check 활성화 





// begin::전체체크
var $checkboxes = $(".doc_list__box .doc_list__block :checkbox");
var $button = $("#check_all01");
var $box = $(".doc_list__block");

function allChecked() {
    return $checkboxes.length === $checkboxes.filter(":checked").length;
}

function updateButtonStatus() {
    $button.text(allChecked() ? "전체해제" : "전체선택");
}

function handleButtonClick() {
    if (allChecked()) {
        $checkboxes.attr("checked", false);
        $box.removeClass('checked');
    } else {
        $checkboxes.attr("checked", true);
        $box.addClass('checked');
    }
}

$button.on("click", function () {
    handleButtonClick();
    updateButtonStatus();

});

$checkboxes.on("change", function () {
    updateButtonStatus();
});
// end::전체체크
반응형

관련글 더보기