[javascript] 전체 체크박스 선택시 하위 체크박스 상태 제어

전체 체크박스 선택시 하위 체크박스 상태 제어

대상 엘레먼트를 확인한다.

<input type="checkbox" value="" class="checkAll" checked>

input 태그에 onclick 속성을 추가한다.

<input type="checkbox" value="" class="checkAll"  checked onclick="fnCheckAll(this)">

함수를 생성한다.

function fnCheckAll(target){
    if($(target).is(':checked')){
        $(target).closest('.panel-heading').next('.panel-collapse').find('.panel-body input[type="checkbox"]').prop({checked:false});            
    }
    else{
        $(target).closest('.panel-heading').next('.panel-collapse').find('.panel-body input[type="checkbox"]').prop({checked:true});
    }

    $(target).closest('.panel-heading').next('.panel-collapse').find('.panel-body input[type="checkbox"]').each(function(index){
        $(this).click();
    });
}

전체 체크박스 선택시 하위의 체크박스들의 상태를 모두 변경하기 위한 코드이다. $(this).click(); 를 사용하면, 클릭 이벤트가 발생하며, 동시에 체크박스의 상태도 변경되므로, 이 코드를 사용하기 위해서는 상태를 반대로 변경해 놓아야 한다.

설정해 놓은 checked 값을 그대로 사용하기 위해서는 $(this).triggerHandler("click"); 를 사용한다.

function fnCheckAll(target){
    if($(target).is(':checked')){
        $(target).closest('.panel-heading').next('.panel-collapse').find('.panel-body input[type="checkbox"]').prop({checked:true});            
    }
    else{
        $(target).closest('.panel-heading').next('.panel-collapse').find('.panel-body input[type="checkbox"]').prop({checked:false});
    }

    $(target).closest('.panel-heading').next('.panel-collapse').find('.panel-body input[type="checkbox"]').each(function(index){
        //$(this).click();
        $(this).triggerHandler("click");
    });
}