체크 박스 - 멀티

체크박스를 멀티로 사용하여 하나 이상을 체크할 수 있도록 하는 방법에 대해서 공부하였다.

 

우선 FormItemController에서 지역들을 담고있는 Map을 모델에 넘겨주는 작업을 해줘야한다.

@ModelAttribute("regions")
public Map<String,String> regions(){
    Map<String,String> regions = new LinkedHashMap<>();
    regions.put("SEOUL","서울");
    regions.put("BUSAN","부산");
    regions.put("JEJU","제주");
    return regions;
}

@ModelAttribute를 이용하여 해당 컨트롤러를 요청할때 regions에서 반환한 값이 모델에 자동으로 담기도록 해준다.

 

 

<addForm.html 코드 추가>

<!-- multi checkbox -->
<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')}"
               th:text="${region.value}" class="form-check-label">서울</label>
    </div>
</div>

 

 

멀티 체크박스를 할 경우 name은 같아도 되지만 id는 모두 달라야 한다.

따라서 아래와 같은 코드를 사용하여 id값을 모두 다르게 설정할 수 있다.(id 형식 ==> name + 숫자)

th:for="${#ids.prev('regions')}"