유통지도 > 전체 시추공 활성/비활성 처리, 분류별 표시 활성/비활성 처리 기능 추가

src/main/webapp/WEB-INF/views/map/left/mapLeft.jsp

@@ -1372,14 +1372,15 @@ function table3display(){
 		}
 	</script>
 	<div class="map-division-wrapper">
-		<div class="map-division-title" id="map-label-cals" onclick="forceUncheckHoleLayerOnOff();" style="cursor: pointer;" title="전체 지도 구분(CALS) 숨김/보임">
+		<div class="map-division-title" id="map-label-cals">
+			<input id="toggleChkAll" name="toggleChkAll" type="checkbox" value="checkbox" onclick="forceUncheckHoleLayerOnOff(this);" title="전체 지도 구분(CALS) 숨김/보임" checked />
 			지도구분
 		</div>
 		<div class="map-division-contents">
 			<!-- 트리메뉴 시작 -->
 			<ul id="browser" class="treeview ground-info-left-treeview">
 				<li class="open">
-					<span>운송교통시설</span>
+					<span><input class="toggleChk" type="checkbox" name="toggleChk" value="checkbox" onclick="" title="운송교통시설 숨김/보임" checked />운송교통시설</span>
 					<ul>
 						<li>
 							<input id="hole1" name="hole1" type="checkbox" value="checkbox" checked="" onclick="hole_layerOnOff();">
@@ -1433,7 +1434,7 @@ function table3display(){
 					</ul>
 				</li>
 				<li class="closed">
-					<span>계획구역 및 토지정비</span>
+					<span><input class="toggleChk" type="checkbox" name="toggleChk" value="checkbox" onclick="" title="계획구역 및 토지정비 숨김/보임" checked />계획구역 및 토지정비</span>
 					<ul>
 						<li>
 							<input id="hole8" name="hole8" type="checkbox" value="checkbox" checked="" onclick="hole_layerOnOff();">
@@ -1445,7 +1446,7 @@ function table3display(){
 					</ul>
 				</li>
 				<li class="closed">
-					<span>공공건축시설</span>
+					<span><input class="toggleChk" type="checkbox" name="toggleChk" value="checkbox" onclick="" title="공공건축시설 숨김/보임" checked />공공건축시설</span>
 					<ul>
 						<li>
 							<input id="hole9" name="hole9" type="checkbox" value="checkbox" checked="" onclick="hole_layerOnOff();">
@@ -1499,7 +1500,7 @@ function table3display(){
 					</ul>
 				</li>
 				<li class="closed">
-					<span>주거 및 상업시설</span>
+					<span><input class="toggleChk" type="checkbox" name="toggleChk" value="checkbox" onclick="" title="주거 및 상업시설 숨김/보임" checked />주거 및 상업시설</span>
 					<ul>
 						<li>
 							<input id="hole16" name="hole16" type="checkbox" value="checkbox" checked="" onclick="hole_layerOnOff();">
@@ -1546,7 +1547,7 @@ function table3display(){
 					</ul>
 				</li>
 				<li class="closed">
-					<span>보건,휴식,종교시설</span>
+					<span><input class="toggleChk" type="checkbox" name="toggleChk" value="checkbox" onclick="" title="보건,휴식,종교시설 숨김/보임" checked />보건,휴식,종교시설</span>
 					<ul>
 						<li>
 							<input id="hole22" name="hole22" type="checkbox" value="checkbox" checked="" onclick="hole_layerOnOff();">
@@ -1593,7 +1594,7 @@ function table3display(){
 					</ul>
 				</li>
 				<li class="closed">
-					<span>수자원 및 환경처리시설</span>
+					<span><input class="toggleChk" type="checkbox" name="toggleChk" value="checkbox" onclick="" title="수자원 및 환경처리시설 숨김/보임" checked />수자원 및 환경처리시설</span>
 					<ul>
 						<li>
 							<input id="hole28" name="hole28" type="checkbox" value="checkbox" checked="" onclick="hole_layerOnOff();">
@@ -1619,7 +1620,7 @@ function table3display(){
 					</ul>
 				</li>
 				<li class="closed">
-					<span>자원공급시설</span>
+					<span><input class="toggleChk" type="checkbox" name="toggleChk" value="checkbox" onclick="" title="자원공급시설 숨김/보임" checked />자원공급시설</span>
 					<ul>
 						<li>
 							<input id="hole31" name="hole31" type="checkbox" value="checkbox" checked="" onclick="hole_layerOnOff();">
@@ -1638,7 +1639,7 @@ function table3display(){
 					</ul>
 				</li>
 				<li class="closed" style="display: none;">
-					<span>지반조사</span>
+					<span><input class="toggleChk" type="checkbox" name="toggleChk" name="toggleChk" value="checkbox" onclick="" title="지반조사 숨김/보임" />지반조사</span>
 					<ul>
 						<li>
 							<input id="hole33" name="hole33" type="checkbox" value="checkbox" checked="" onclick="hole_layerOnOff();">

src/main/webapp/js/map/main/map.js

@@ -389,10 +389,12 @@ function hole_layerOnOff() {
  * 지도구분을 클릭하면 CALS 분류를 전체 해제 또는 전체 선택한다.
  * @returns
  */
-function forceUncheckHoleLayerOnOff() {
+function forceUncheckHoleLayerOnOff(ele) {
 	//thkim
 	var eleId 		= "map-label-cals";
 	var toggleClass = "active";
+    var chkTF = $(ele).prop('checked');	// checked 여부 true/false 
+	$('input[name="toggleChk"]').prop('checked', chkTF);
 
 	var targetBtn = document.getElementById(eleId);
 	var returnValue = null;
@@ -448,6 +450,34 @@ function forceUncheckHoleLayerOnOff() {
 
 }
 
+/**
+ * 지도구분 분류를 클릭하면 하위분류 체크박스를 전체 해제 또는 전체 선택한다.
+ * $(this) : 분류타이틀에 체크박스
+ * $(this).closest('li').find('> ul > li > input:checkbox') : 하위분류 체크박스들
+ * @returns
+ */
+$(document).on('click', '.map-division-contents .toggleChk', function() {
+    let chkTF = $(this).prop('checked');	// checked 여부 true/false 
+	$(this).closest('li').find('> ul > li > input:checkbox, > ul > li > input:radio').prop('checked', chkTF)
+})
+
+/**
+ * 지도구분(CALS)분류 하위 분류 체크박스 클릭 이벤트
+ * 하위 분류가 모두 선택되면 전체 선택/해제 체크박스 선택
+ * @returns
+ */
+$(document).on('click', '.map-division-contents > ul > li > ul > li input:checkbox', function() {
+	let inputCnt = $(this).closest('ul').find('input[id^="hole"]').length;
+	let checkedCnt = $(this).closest('ul').find('input[id^="hole"]:checked').length;
+	
+	if (checkedCnt < inputCnt) {	// 
+		$(this).closest('ul').closest('li').find('.toggleChk').prop("checked", false);
+	} else {
+		$(this).closest('ul').closest('li').find('.toggleChk').prop("checked", true)
+	}
+})
+
+
 /**
  * 좌측 side bar를 숨긴다.
  * @returns