21. 멀티 체크박스

@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 만들어 두면 모든 컨트롤러 지날 때 저게 들어간다.

이것도 좀 비효율 적이기는 함. 싱글톤같은걸로 처리하는게 좋긴 함.

참고로 LinkedHashMap은 순서가 보장됨.

 

여튼 위의 "regions"라는 이름으로 return값, regions가 들어감.

 

@Data
public class Item {

    private Long id;
    private String itemName;
    private Integer price;
    private Integer quantity;
    private Boolean open;
    private List<String> regions;
    private ItemType itemType;
    private String deliveryCode;

    public Item() {
    }
}

 

@GetMapping("/add")
public String addForm(Model model) {
    model.addAttribute("item", new Item());
    return "form/addForm";
}

빈 아이템을 생성해서 넘겨줬기 때문에.

 

 

 

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

regions 횟수만큼 반복.

th:field="*{regions}"인데 이거는 위에서 정해놓은 들어온 th:object="item"의 regions임.

여튼 value는 우리가 넣어준 regions로 ${region.key} 해주니 빈걸로 갔을테니 다 체크표시 해제임.

참고로 이렇게 체크박스가 여러개 일때는 id에 타임리프가 이름+숫자를 붙여줌.

regions1, regions2 ....

${#ids.prev('regions')} 이거는 id는 같아야 하기 때문에, #ids.prev('regions')는 이전의 가장 가까운 태그 중 id가 regions라는 문자를 포함하는 id를 찾아서 매칭 시켜주는거임. 그 regions라는 문자를 가진 id를 가져와서 for에다 넣어줌.

#ids 이걸로 해주면 th:field="*{regions}" 여기서 나온 id를 인식을 해서 자동으로 가져와 넣어줌. 

 

<div>
    <div>등록 지역</div>
    <div class="form-check form-check-inline">
        <input type="checkbox" value="SEOUL" class="form-check-input" id="regions1" name="regions"><input type="hidden" name="_regions" value="on"/>
        <label for="regions1" class="form-check-label">서울</label>
    </div>
    <div class="form-check form-check-inline">
        <input type="checkbox" value="BUSAN" class="form-check-input" id="regions2" name="regions"><input type="hidden" name="_regions" value="on"/>
        <label for="regions2" class="form-check-label">부산</label>
    </div>
    <div class="form-check form-check-inline">
        <input type="checkbox" value="JEJU" class="form-check-input" id="regions3" name="regions"><input type="hidden" name="_regions" value="on"/>
        <label for="regions3" class="form-check-label">제주</label>
    </div>
</div>

결과임.