[Spring Boot] thymleaf / checkbox / 체크박스 / 멀티 체크박스 / th:field

👌 addForm.html

• 🎈checkbox에 타임리프를 사용하지 않았을 경우, 체크박스 선택 값 확인하기
  

• 체크박스 체크여부
  1. open=on&_open=on -> 체크박스 선택 했을 경우
  -> open에 값이 있는 것을 확인하고, 사용
  -> true 결과값을 출력
  -> _open을 무시된다.
  

   2. 	_open=on -> 체크박스 선택하지 않았을 경우
	-> 체크박스를 체크하지 않으면 Spring이 _open만 있는 것을 확인하고
		open이 값이 체크되지 않았다고 인식.
	-> 이 경우 서버에서 null이 아니라 false인 것을 확인할 수 있다. 
    

<div>판매 여부</div> 
<div>
	<div class="form-check"> 
 			<input type="checkbox" id="open"  name="open" class="form-check-input">
 			<label for="open" class="form-check-label">판매 오픈</label> 
	</div> 
</div>

-> 체크박스 선택 시 , true로 넘어온다.

---

-> 체크박스 미선택 시, 넘어오는 값이 없기때문에 null로 넘어온다.

-> 체크박스 선택값이 true와 null이기 때문에,
편리하게 사용하기 위해 null을 false로 받기 위해서는 hidden 필드를 추가해줘야 한다.

---

• hidden 추가
• hidden은 체크박스의 name 속성값 앞에 _를 붙여주도록 약속되어 있다.

<div>판매 여부</div> 
<div>
	<div class="form-check"> 
 			<input type="checkbox" id="open"  name="open" class="form-check-input">
			<input type="hidden" name="_open" value="on"> 
 			<label for="open" class="form-check-label">판매 오픈</label> 
	</div> 
</div>

-> 체크박스 선택시, hidden 필드는 on

-> 체크박스 미선택 시, open은 null이지만 hidden 필드는 on이다.

-> 또한, null이지만 false값으로 넘어오게 되면서, true false로 사용할 수 있다.

---

• 🎈 checkbox에 타임리프 사용했을 경우, 체크박스 선택 값 확인하기
• 타임리프를 사용하면 hidden 필드까지 알아서 만들어 주기 때문에 , hidden 필드를 만들어줄 필요가 없다.

<div>판매 여부</div>
<div>
	 <div class="form-check">
	 	<input type="checkbox" id="open"  th:field="*{open}" class="form-check-input">
		<label for="open" class="form-check-label">판매 오픈</label>
	 </div>
</div>

• hidden 필드를 만들어주지 않았지만, 타임리프가 대신 생성해 주었다.
  

---

🎈 multi checkbox

• addForm.html

<div>
	<div>등록 지역</div>
			<div th:each="region : ${regions}" class="form-check form-check-inline">
			<input type="checkbox" th:field="*{regions}" th:value="${region.key}" class="form-check-input">
			<label th:for="${#ids.prev('regions')}" class="form-check-label" th:text="${region.value}">서울</label>
	</div>
</div>

• 타임리프가 id값을 알아서 각가 다르게 만들어준다.

• name값은 같은 checkbox끼리 같게 만들어준다.
  

• 자바에서 regions 키값으로 넘어온 데이터를 th:each 로 꺼낸다.
  

• 컨트롤러에서 보낸 'regions'를 반복문을 돌리면서 th:value th:text로 출력한다.

• label태그의 for 속성과 input태그의 id속성이 매핑이 되어야 하는데, 타임리프가 매핑을 대체해준다.

<label th:for="${#ids.prev('regions')}" class="form-check-label" th:text="${region.value}">서울</label>

-> th:field를 사용해서 input 태그들의 id가 자동으로 생성되었다.

-> label 태그의 th:for에는 "${#ids.prev('regions')}"를 사용하였는데,
앞에 input태그의 id값과 매핑되어야 한다.

-> label태그가 input태그의 뒤에 있으므로 prev를 사용하였고,
-> label태그가 input태그의 앞에 있었다면, "${#ids.next('regions')}"를 사용했어야 한다.