라디오 버튼

라디오 버튼이란 여러 선택지 중 하나의 선택지를 선택할때 사용한다. (라디오 버튼은 선택을 무조건 하나 해줘야한다.)

 

라디오 버튼을 이용하여 상품의 종류가 무엇인지를 선택하는 코드를 작성해보자.

 

 

<ItemType>

package hello.itemservice.domain.item;

public enum ItemType {
    BOOK("도서"), FOOD("음식"), ETC("기타");

    private final String description;

    ItemType(String description) {
        this.description = description;
    }

    public String getDescription() {
        return description;
    }
}

 

 

 

<FormItemController>

itemType은 등록 폼, 조회, 수정 폼에서 모두 사용하므로 @ModelAttribute를 이용하여 모델에 넘겨준다.

@ModelAttribute("itemTypes")
public ItemType[] itemTypes() {
    return ItemType.values();
}

ItemType.values()를 사용하면 해당 ENUM의 모든 정보를 배열로 반환한다.

 

 

<addForm.html>

<!-- radio button -->
<div>
    <div>상품 종류</div>
    <div th:each="type : ${itemTypes}" class="form-check form-check-inline">
        <input type="radio" th:field="*{itemType}" th:value="${type.name()}" class="form-check-input">
        <label th:for="${#ids.prev('itemType')}" th:text="${type.description}" class="form-check-label">
            BOOK
        </label>
    </div>
</div>

 

라디오 버튼은 항상 하나를 선택하도록 되어있으므로 별도의 히든필드가 필요없다.

 

<실행결과>