[jQuery/thymeleaf] 체크박스 선택 유지 -> 값 비교 후 checked

·2022년 4월 3일
0

체크 박스 선택 후 form으로 값을 넘겼다.

처음부터 ajax로 했으면 조금 더 빠르게 구현했을 것 같은데, 이미 너무 많은 시간이 지났다.

그래서 일단, form으로 보낸 체크박스 List을 다시 view에서 받았다.

<label class="search-type">
<input type="hidden" class="typeArr" th:value="${type}">
<input type="checkbox" id="s-type-camping" name="type" value="캠핑" ><span class="search-style">캠핑</span>
</label>
<label class="search-type">
<input type="checkbox" id="s-type-glamping" name="type" value="글램핑" ><span class="search-style">글램핑</span>
</label>
<label class="search-type">
<input type="checkbox" id="s-type-caravan" name="type" value="카라반" ><span class="search-style">카라반</span>
</label>

value를 한글로 넘겨줬다. 따로 숫자 key 값 없이 그냥 한글로 비교해주려고 했다.

체크된 값들이 name=type 중에서 어떤 value와 같은지 비교한 다음 cheked를 줘야했다.

일단 input hidden으로 controller에 보냈던 값을 다시 가져왔다.

스크립트에서 먼저 hidden의 value를 가져왔다. 콘솔 출력해보면 [ 선택한 체크박스 값, 값, 값 ] 의 형식으로 나타났다. 배열이라 반복문을 사용해야 할 것 같았다.

<script>
	$(function(){
				var typeArr = $(".typeArr").val();

				$('input:checkbox[name="type"]').each(function() {
					if( typeArr.indexOf(this.value) > -1){  
						$(this).prop('checked', true); 
					   }
				});
      });

</script>

for문도 써보고, 배열의 인덱스 값이랑 name=type의 인덱스 값이랑 비교해보고

이것저것 다 써봤지만 정상적으로 작동을 하지 않았다.

그러다가 찾게 된 해결법ㅠㅠ 감사합니다

https://okky.kr/article/650602
댓글 참고

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=tnakekd&logNo=220891850379
블로그 참고

멋찐 선배림들의 코드를 보고 수정해봤더니 너무 잘 동작했다!!!


선택하고 submit 버튼 눌러서 페이지 다시 불러와도 체크박스가 유지된다!

0개의 댓글