[JQuery] checkBox 체크여부 확인(전체체크), 체크된 값만 가져오기

체크박스 관련 기능들

 

 

전체체크용 체크박스는 allChk 라는 아이디 값을 부여하고

각 행의 체크박스는 chk라는 클래스를 부여한다.

<input type="checkbox" id="allChk">	// 전체 체크박스
<input type="checkbox" class="chk" >	// 각 행 체크박스

 

* 전체체크박스 체크 여부에 따른 하위 체크박스들 상태 변경

$("#allChk").change(function(){
  if($("#allChk").is(":checked")){
 	 $(".chk").prop("checked", true);
  }else{
  	$(".chk").prop("checked", false);
  }
});

 

* 하위 체크박스들 체크 여부에 따른 전체 체크박스 상태 변경

하위 체크박스가 체크된 갯수와, 하위 체크박스의 전체갯수를 비교해서 같으면 전체체크 true, 다르면 전체체크 false

$(".chk").change(function(){
  if($(".chk:checked").length == $(".chk").length){
  	$("#allChk").prop("checked", true);
   }else{
  	$("#allChk").prop("checked", false);
  }
});

 

* 체크박스가 체크된 게시글의 아이디 가져와서 배열에 담아주기

$(document).on('click', '#delete', function() {	// 삭제버튼 클릭 시 
	var chk_id = [];

	$(".chk:checked").each(function(){
		var id = $(this).val();
		chk_id.push(id);
	});
	location.href="delete.do?id="+chk_id;
});