th:field와 단일 체크박스 편리하게 사용하기

Item에 true, false 값을 관리하는 필드가 있다.

@Data
public class Item {
    private Boolean open; //오픈 여부
}

 

아래처럼 순수 HTML로 체크박스를 만들고 POST 요청을 보내면 문제가 있다.

<form action="item.html" th:action method="post">
    <input type="checkbox" id="open" name="open">
</form>

체크박스 미선택

체크박스 선택시

 

체크박스를 선택한 경우에는 HTML Form에서 open=on이 넘어온다. 이 값은 스프링에서 true로 타입 변환이 이뤄지진다.

선택하지 않은 경우에는 서버에 null 값이 넘어온다. 자세히는 name="open" 값이 전혀 존재하지 않은 상태이다.

 

체크 박스 미선택 문제를 스프링MVC와 히든 필드로 해결할 수 있다. (미선택시 false, 선택시 true가 넘어오게)

<input type="checkbox" id="open" name="open">
<input type="hidden" name="_open" value="on"/>

 

어떻게 name="open"과 name="_open"으로 해결한다는걸까?

체크박스 선택시

open=on&_open=on

위의 파라미터 값이 넘어올텐데 이렇게 넘어오면 스프링MVC가 open에 체크가 있다고 판단한다.

이때 _open의 값은 넘어오지 않게 무시한다.

 

체크박스 미선택시

_open=on

_open의 값만 넘어올텐데 이때 스프링MVC는 open의 값이 선택되지 않았다고 판단한다.

서버에서는 Boolean값을 null이 아닌. open=false로 처리한다. 

 

하지만 히든필드로 매번 작성하기는 불편하다.

이 문제를 th:object와 th:field로 해결할 수 있다.

 

<form action="item.html" th:action th:object="${item}" method="post">
    <input type="checkbox" th:field="*{open}">
</form>

위와 같이 th:object와 th:field를 사용하면 HTML에 자동 생성된 히든 필드를 확일할 수 있다.

 

<input type="checkbox" id="open" name="open" value="true">
<input type="hidden" name="_open" value="on"/>

그러면 서버에서 편하게 미체크시 false, 체크시 true를 받을 수 있는것이다.

 

상품 상세보기와 같이 Form이 없다고해도 아래와 같이 th:field만 사용해도 체크 여부를 판단하여

HTML 생성시 체크박스의 체크 여부에따라 속성 checked="checked"을 넣고 빼준다.

<input type="checkbox" th:field="${item.open}" disabled>