[JavaScript] Check box 전체 선택 후 전체 중 1개라도 해제하면 전체도 함께 해제되게 하기

<input type='checkbox'
       name='selectall' 
       value='selectall'
       onclick='selectAll(this)'/> <b>전체</b>
<br />
<input type='checkbox'
       name='animal' 
       value='dog'/> 강아지
<br />
<input type='checkbox' 
       name='animal' 
       value='cat' /> 고양이
<br />
<input type='checkbox' 
       name='animal' 
       value='rabbit' /> 토끼

 

 

위와 같은 모양의 체크박스를 만들었다.

이때 전체를 선택하면 강아지,고양이,토끼가 모두 선택되고 전체를 해제하면 모두 해제되도록 코드를 작성해보자

 

$(document).ready(function(){
	$("#selectall").bind("click", function(){
        // 그룹구분 전체 선택
        if($("#selectall").is(":checked")) $("input[name=animal]").prop("checked", true);
        else $("input[name=animal]").prop("checked", false);
    });
});

 

 

전체가 선택된 상태에서 1개라도 해제가 되면 이때는 전체가 아니다

그러므로 전체 선택 중 1개라도 해제될땐 전체박스도 함께 해제되도록 한다.

 

$("input[name=animal]").click(function(){
    // 그룹구분 전체선택에서 1개라도 해제하면 '전체' 항목도 해제
    var total = $("input[name=animal]").length;
    var checked = $("input[name=animal]:checked").length;

    if(total != checked) $("#selectall").prop("checked", false);
    else $("#selectall").prop("checked", true);
});

 

그룹 해제의 기준은 전체의 길이와 체크된 항목의 길이를 비교하여 알 수 있다.