[Jquery]체크박스 전체선택 및 전체해제 또는 특정선택 제어기능

 

 

 

안녕하세요. 오늘은 체크박스 관련된 제이쿼리를 소개하려합니다.

아래 사진과 같이 전체를 선택하면 전부 선택하는 기능은 화면상으로 복잡할 여지가 있습니다.

 

 

 

 

 

 

해서, 복수로 선택하되, 전체를 눌렀을 경우 모두 해제되고 ‘전체’만 선택될 수 있도록 하는

제이쿼리를 정리해보려 합니다.

번외로 특정선택을 할 수 있는 제어기능도 정리하려 합니다.

 

---

 

Jsp

 

<input type="checkbox" id="checkbox_total" name="checkbox_total" value=""  /><span class="ml_10 mr_10">전체 </span>
<input type="checkbox" onclick="changeFn();" id="checkbox1" name="checkbox1" value="1" <c:if test="${searchVO.checkbox1 eq '1' }">checked</c:if> /><span class="ml_10 mr_10">테스트1</span>
<input type="checkbox" onclick="changeFn();" id="checkbox2" name="checkbox2" value="2" <c:if test="${searchVO.checkbox2 eq '2' }">checked</c:if> /><span class="ml_10 mr_10">테스트2</span>
<input type="checkbox" onclick="changeFn();" id="checkbox3" name="checkbox3" value="3" <c:if test="${searchVO.checkbox3 eq '3' }">checked</c:if> /><span class="ml_10 mr_10">테스트3</span>
<input type="checkbox" onclick="changeFn();" id="checkbox4" name="checkbox4" value="4" <c:if test="${searchVO.checkbox4 eq '4' }">checked</c:if> /><span class="ml_10 mr_10">테스트4</span>

 

우선 jsp에서는 input type에 체크박스를 넣어 체크박스 형태를 만들어줍니다.

<c:if>문을 통해서 특정 값일 경우 checked를 할 수 있도록 합니다.

Onclick 함수 기능은 아래에서 별도로 소개하겠습니다.

 

 

Jquery

 

<script>
$(document).ready(function(){
 
$("#checkbox_total").click(function(){
if($("#checkbox_total").prop("checked")){
    $("#checkbox_total").prop("checked",true);
    $("#checkbox1").prop("checked",true);
    $("#checkbox2").prop("checked",true);
    $("#checkbox3").prop("checked",true);
    $("#checkbox4").prop("checked",true);
}else{
    $("#checkbox_total").prop("checked",false);
    $("#checkbox1").prop("checked",false);
    $("#checkbox2").prop("checked",false);
    $("#checkbox3").prop("checked",false);
    $("#checkbox4").prop("checked",false);
}
});
});
</script>

 

 

페이지 실행 시에, 자동으로 실행되는 $(document).ready(function(){ 에 코드를 만들 예정입니다.

여기서 가장 중요히 사용되는 것은  prop() 메소드입니다.

Prop()는 지정된 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가하는 기능입니다.

결국은 prop메소드 안에 true일 경우 체크, false일 경우 미 체크로 나눠집니다.

 

 

$("#checkbox_total").click(function(){

전체의 id 값인 ‘checkbox_total’ 를 기준으로 클릭 함수를 가동합니다.

 

if($("#checkbox_total").prop("checked")){

전체의 id 값인 ‘checkbox_total’ 가 체크될 경우

 

$("#checkbox_total").prop("checked",true);

전체의 id 값인 ‘checkbox_total’ 는 체크 상태로 있게 되고

 

$("#checkbox1").prop("checked",true);

$("#checkbox2").prop("checked",false);

$("#checkbox3").prop("checked", false);

$("#checkbox4").prop("checked", false);

 

나머지 테스트 1~4의 id값을 가지고 false로 선언하여 전체만 클릭상태가 되도록 합니다.

 

}else{

$("#checkbox_total").prop("checked",false);

$("#checkbox1").prop("checked",false);

$("#checkbox2").prop("checked",false);

$("#checkbox3").prop("checked",false);

$("#checkbox4").prop("checked",false);

  }

 

빈데로 else를 사용하여 전체의 id 값인 ‘checkbox_total’ 가 체크가 false일 경우

나머지 값들도 false로 선언하여 모두 선택해제가 되도록 합니다.

 

이 기능을 응용하면 전체선택 및 전체해제를 할 수 있겠죠!

 

 

---

 

하지만 이 기능만 하면 전체를 제외한 나머지 테스트1부터 테스트4까지 체크할 경우 전체의 체크표시는 남아있게 됩니다. 이를 제어하려면 별도의 함수가 필요합니다.

 

 

Jsp 

 

<input type="checkbox" id="checkbox_total" name="checkbox_total" value=""  /><span class="ml_10 mr_10">전체 </span>
<input type="checkbox" onclick="changeFn();" id="checkbox1" name="checkbox1" value="1" <c:if test="${searchVO.checkbox1 eq '1' }">checked</c:if> /><span class="ml_10 mr_10">테스트1</span>
<input type="checkbox" onclick="changeFn();" id="checkbox2" name="checkbox2" value="2" <c:if test="${searchVO.checkbox2 eq '2' }">checked</c:if> /><span class="ml_10 mr_10">테스트2</span>
<input type="checkbox" onclick="changeFn();" id="checkbox3" name="checkbox3" value="3" <c:if test="${searchVO.checkbox3 eq '3' }">checked</c:if> /><span class="ml_10 mr_10">테스트3</span>
<input type="checkbox" onclick="changeFn();" id="checkbox4" name="checkbox4" value="4" <c:if test="${searchVO.checkbox4 eq '4' }">checked</c:if> /><span class="ml_10 mr_10">테스트4</span>

 

위와 같이 테스트1부터 테스트4까지 input 안에 onclick="changeFn();" 를 만들어줍니다.

 

 

Jquery

 

<script>
function changeFn(){
 
if($("#checkbox1").prop("checked")){
      $("#checkbox1").prop("checked",true);
      $("#checkbox_total").prop("checked",false);
  }
  if($("#checkbox2").prop("checked")){
      $("#checkbox2").prop("checked",true);
      $("#checkbox_total").prop("checked",false);
  }
  if($("#checkbox3").prop("checked")){
      $("#checkbox3").prop("checked",true);
      $("#checkbox_total").prop("checked",false);
  }
  if($("#checkbox4").prop("checked")){
      $("#checkbox4").prop("checked",true);
      $("#checkbox_total").prop("checked",false);
  }
}
</script>

 

 

함수안에 테스트1부터 테스트4까지의 아이디를 체크할 경우 prop를 통하여 전체값은 false로 설정할 수 있도록 합니다.