본문 바로가기

javascript

체크박스 전체 체크

html

 


<div class="check_list">
  <div class="m_check_wrap">
 	<input id="all" type="checkbox" class="check_all" onclick="check_all(this)">
  	<label for="all">전체</label>
  </div>
  <div class="m_check_wrap">
  	<input id="man" type="checkbox" onclick="select_list(this)">
  	<label for="man">남성</label>
  </div>
  <div class="m_check_wrap">
  	<input id="woman" type="checkbox" onclick="select_list(this)">
  	<label for="woman">여성</label>
  </div>
</div>

javascript

 


/* 체크박스 올 체크 on off */
function check_all(thisobj) {
	var $this = $(thisobj);

	if($this.prop("checked") == true) {
		$this.closest(".check_list").find("input[type=checkbox]").prop("checked", true);
	} else {
		$this.closest(".check_list").find("input[type=checkbox]").prop("checked", false);
	}
}

/* 체크박스 리스트 체크시 all 체크박스 on off */
function select_list(thisobj) {
	var $this = $(thisobj);
	var check_all = $this.closest(".check_list").find(".check_all");
	var another_check = $this.closest(".check_list").find("input[type=checkbox]").not(".check_all");
	var check_count = 0;

	if($this.prop("checked") == false) {
		check_all.prop("checked", false);
	}

	another_check.each(function() {
		if($(this).prop("checked") == false){
			check_count++;
		}
	});

	if(check_count == 0) {
		check_all.prop("checked", true);
	}
}

감사합니다.