Thymeleaf 통합 (3) 체크 박스 - 단일 (2)

체크 박스 - 단일 02

타임리프

개발할 때 마다 이렇게 히든 필드를 추가하는 것은 상당히 번거롭다. 

타임리프가 제공하는 폼 기능을 사용하면 이런 부분을 자동으로 처리할 수 있다.

 

체크 박스 코드 추가

addForm.html

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

이렇게 쓰거나

 

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

이렇게 쓴다.

 

실행해서 페이지 소스 보기 눌러보면

타임리프 체크 박스 HTML 생성 결과

 

1

2

item.open도 true로 나온다.

 

반대로 체크 하지 않고 등록해서 확인해보면

3

 

4

 

5

item.open = false 나오는 것을 확인할 수 있음.

 

---

상품 상세에 적용

item.html

 

체크하고 등록한 경우

 

체크 없이 등록한 경우

 

주의

: item.html 에는 th:object 를 사용하지 않았기 때문에 th:field 부분에 ${item.open} 으로 적어주어야 한다.

disabled 를 사용해서 상품 상세에서는 체크 박스가 선택되지 않도록 했다.

 

 

타임리프의 체크 확인

 

 

수정도 수정

editForm.html

<!-- 추가 -->
<!-- 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>

 

그런데 실행해보면 체크 박스를 수정해도 반영이 안 된다.

실제 반영되게 하려면 뭔가 작업을 하나 더 해야 한다는 이야기

 

 

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

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

 

 

이제 실행해보면

1

 

2

 

3

 

등...