이야기앱 세상

jquery를 이용한 checkbox 전체 선택 해제하기 본문

IT/jQuery

jquery를 이용한 checkbox 전체 선택 해제하기

storya 2021. 1. 19. 10:07

jquery를 이용한 checkbox 전체 선택 해제하기

 

<input type="checkbox" id="chk_all"> <--------- [전체 선택]

<input type="checkbox" class="del-chk">

<input type="checkbox" class="del-chk">

<input type="checkbox" class="del-chk">

 

[전체 선택] 체크박스를 클릭하면 개별 체크박스를 전체 선택하거나 선택을 해제하기 
$(document).on('click','#chk_all',function(){
    if($('#chk_all').is(':checked')){
       $('.del-chk').prop('checked',true);
    }else{
       $('.del-chk').prop('checked',false);
    }
});


체크된 체크박스를 해제하면 [전체 선택] 체크박스도 해제되고 개별 체크박스를 전부 선택하면 [전체 선택] 체크박스도 선택되도록 처리하기 
$(document).on('click','.del-chk',function(){
    if($('input[class=del-chk]:checked').length==$('.del-chk').length){
        $('#chk_all').prop('checked',true);
    }else{
       $('#chk_all').prop('checked',false);
    }
});

반응형
Comments