[javascript] 전체선택 checkbox 자동선택/자동해제

포인트는,

-전체선택 checkbox 선택 시 나머지 cat, dog, tiger, lion이 선택된다. (all select)

-전체선택 checkbox 해제 시 전부 선택 해제된다. (all deselect)

-전체선택 checkbox 선택 중, cat, dog, tiger, lion 중 하나라도 선택 해제 시 전체선택 checkbox가 자동 해제된다. 

-전체선택 checkbox 해제 중, cat, dog, tiger, lion 모두 선택 시 전체선택 checkbox가 자동 선택된다.

 

1.HTML 세팅하기

        <div class="checkbox_group" style='display:inline'>
        
            <form action="" mthod="post">
            
               <div class="checkbox checkbox-inline" >
			   <input type="checkbox"  id="allSelect" value='all' action='ALL' checked="checked"><label for="allSelect">전체선택</label>
		       </div>
                
                <div class="checkbox checkbox-inline">
                  <input type="checkbox" name="filterstate" id="catChecked" class="normal" value="cat" checked="checked"><label for="cat">cat</label>
                </div>
                
                <div class="checkbox checkbox-inline">
                  <input type="checkbox" name="filterstate" id="dogChecked" class="normal" value="dog" checked="checked"><label for="dog">dog</label>
                </div>
                
                <div class="checkbox checkbox-inline">
                  <input type="checkbox" name="filterstate" id="tigerChecked" class="normal" value="tiger" checked="checked"><label for="tiger">tiger</label>
                </div>
                
                <div class="checkbox checkbox-inline">
                  <input type="checkbox" name="filterstate" id="lionChecked" class="normal" value="lion" checked="checked"><label for="lion">lion</label>
                </div>
                
              </form>
              
        </div>

1. checkbox_group div tag 안에 각 input type을 checkbox div tag로 감싸준다.

2. 전체 선택을 위한 checkbox를 제외하고 나머지는 같은 이름으로 맞춰준다 name="filterstate"

 

2.전체선택을 제어하기 위해  javascript작성

1) all select, all deselect

        //checkbox 전체선택 제어 
        $("#allSelect").click( function()  //전체선택 checkbox 클릭 시
        {
		    $("input[name=filterstate]").each(function() // name=filterstate input을 반복문 돌며 제어
            {
			    if($("#allSelect").prop('checked'))	 //전체선택 checkbox 선택
			    {
				    if(!$(this).prop('disabled'))
				    {
				    	$(this).prop('checked', true);
				    }
			    }
			    else                                //전체선택 checkbox 해제
			    {
				    $(this).prop('checked', false);
			    }
	        });
    	});

-전체 선택하는 checkbox의 id는 allSelect다. 그 id에 click event를 걸어준다.

-클릭 시, input[name=filterstate] 즉, cat,dog,tiger,lion을 반복문 돌며 해당 액션을 취한다.

-if문은 전체선택 checkbox 선택했을 때 해당, else문은 전체선택 checkbox 해제했을때가 해당된다.

-if문 안에서는 $(this).prop('checked',true)로 설정

-else문 안에서는 $(this).prop('checked',false)로 설정

여기까지 하면, 전체선택 checkbox 클릭/해제 시 나머지 checkbox를 선택/해제할 수 있어진다.

 

2) 전체선택 checkbox 자동 선택/ 자동 해제

        $('input[name="filterstate"]').change(function() 
            {
                if($("input:checkbox[name=filterstate]:checked").length == 4){ 
                    $("#allSelect").prop('checked', true);
                }else{
                    $("#allSelect").prop('checked', false); 
                }
            });

-이번에는 change 이벤트를 input[name=filterstate] 즉, cat,dog,tiger,lion에 걸어준다.

-선택 사항이 변경이 생겼을 때, 체크된 input의 length를 구해서 4라면(모두 선택됐다면)

-$('#allSelect').prop('checked',true) 전체선택 checkbox를 선택해주고,

-하나라도 선택이 해제됐다면 $('#allSelect').prop('checked',false) 전체선택 checkbox를 해제