체크 박스 - 단일2

shinyeongwoon·2023년 1월 17일

tymeleaf

목록 보기

21/24

thymeleaf

개발 시 매번 hidden field 를 작성하긴 상당히 번거롭다.
타임리프가 제공하는 폼기을을 사용하면 이런 부분을 자동으로 처리할 수 있다.

thymeleaf - 체크 박스 코드 추가

<!-- single checkbox -->
<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>

체크 박스의 기존 코드를 제거하고 타임리프가 제공하는 체크 박스 코드로 변경

thymeleaf 체크 박스 HTML 생성 결과


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

<input type="hidden" name="_open" value="on"/>
thymeleaf를 사용하면 체크 박스의 히든 필드와 관련된 부분도 함께 해결해준다. HTML 생성 결과를 보면 히든 필드 부분이 자동으로 생성되어 있다.

실행 로그

FormItemController : item.open=true //체크 박스를 선택하는 경우
FormItemController : item.open=false //체크 박스를 선택하지 않은 경우

상품 상세에 적용하기

item.html

<hr class="my-4">
<!-- single checkbox -->
<div>판매 여부</div>
<div>
  <div class="form-check">
    <input type="checkbox" id="open" th:field="${item.open}" class="form-check-input" disabled>
    <label for="open" class="form-check-label">판매 오픈</label>
  </div>
</div>

📍 주의 :
item.html에는 th:object를 사용하지 않았기 때문에 th:field부분에 ${item.open}으로 적어 주어야 한다.
disabled를 사용해서 상품 상세에서는 체크 박스가 선택되지 않도록 했다.

HTML 생성 결과

<hr class="my-4">
<!-- single checkbox -->
<div class="form-check">
  <input type="checkbox" id="open" class="form-check-input" disabled name="open" value="true" checked="checked">
  <label for="open" class="form-check-label">판매 오픈</label> 
</div>

thymeleaf의 체크 확인

checked="checked"
체크 박스에서 판매 여부를 선택해서 저장하면, 조회시에 checked 속성이 추가된 것을 확인할 수 있다.
이런 부분을 개발자가 직접 처리하려면 상당히 번거롭다. thymeleaf의 th:field를 사용하면, 값이 true인 경우 체크를 자동으로 처리해 준다.

상품 수정에도 적용하기

editForm.html

<hr class="my-4">
<!-- single checkbox -->
<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>
...

상품 수정도 th:object , th:field 를 모두 적용해야 한다.
실행해보면 체크 박스를 수정해도 반영되지 않는다. 실제 반영되도록 다음 코드를 수정하자.

ItemRepository - update() 코드를 다음과 같이 수정

public void update(Long itemId, Item updateParam) {
	Item findItem = findById(itemId);
	findItem.setItemName(updateParam.getItemName());
	findItem.setPrice(updateParam.getPrice());
	findItem.setQuantity(updateParam.getQuantity());
	findItem.setOpen(updateParam.getOpen());
	findItem.setRegions(updateParam.getRegions());
	findItem.setItemType(updateParam.getItemType());
	findItem.setDeliveryCode(updateParam.getDeliveryCode());
}