[Thymeleaf] 체크 박스 - 멀티

인프런 김영한님의 Spring강의에서 공부한것을 올리며, Thymeleaf의 경우 unit 단위로 공부후 각각 정리하는 글을 작성하겠습니다.

 

멀티 체크 박스

우선 모델에 데이터를 담는 컨트롤러를 확인해 봅시다.

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

 

이제 상품 등록 Form에 멀티체크 박스 부분을 추가해 봅시다!

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

 

결과 는 다음과 같습니다.

 

우선 th:each="region : ${regions}" 을 통해 반복문을 돌도록 됩니다.

컨트롤러에서 넘어온 regions 라는 Model에 담겨있는 Map이 있다.

Map의 반복마다 region이 하나씩 추출되는데, region.key로 Map의 Key값을 알아내 th:value로 출력하고,

region.value 로 값을 알아내서 th:text로 label에서 글씨가 보이도록 출력하게 됩니다.

 

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

멀티 체크박스는 같은 이름의 여러 체크박스를 만들 수 있다.

그런데 문제는 이렇게 반복해서 HTML 태그를 생성할 때, 생성된 HTML 태그 속성에서 name 은 같아도 되지만, id 는 모두 달라야 한다.

따라서 타임리프는 체크박스를 each루프 안에서 반복해서 만들 때 임의로 1,2,3 숫자를 뒤에 붙여준다.

 

HTML의 id 가 타임리프에 의해 동적으로 만들어지기 때문에 <label for="id 값"> 으로 label 의 대상이 되는 id 값을 임의로 지정하는 것은 곤란하다. 타임리프는 ids.prev(...) , ids.next(...) 을 제공해서 동적으로 생성되는 id 값을 사용할 수 있도록 한다.

 

● 히든 필드

input 을 보면 th:field="${item.regions}" 를 사용하고 있기 때문에, 체크가 되지 않았을때 Null값이 넘어가지 않는다.

다른 글에서 설명했든 field는 체크박스에서 사용하면 히든 필드를 알아서 추가해 준다.