체크박스 - 멀티

1. 등록지역 추가

---

• 등록 지역
• 서울, 부산, 제주
• 체크 박스로 다중 선택할 수 있다.
• 등록 form에서 해당 정보를 추가하기 위해서는 controller에서 넘겨줘야 한다.

 

 

2. Controller

---

• LinkedHashMap을 사용하여 지역 정보를 넘겨주자.
• LinkedHashMap을 사용하면 순서대로 들어간다. 순서가 보장된다.

Map<String, String> regions = new LinkedHashMap<>();//linkedHashMap쓰면 순서대로 들어감.순서보장.
regions.put("SEOUL", "서울");
regions.put("BUSAN", "부산");
regions.put("JEJU", "제주");
model.addAttribute("regions", regions);

• 하지만 아래 내용이 아이템 상세, 수정에도 반영되어야 한다. 즉 여러곳에서 쓰인다.

 

 

 

3. @ModelAttribute("name")

---

• @ModelAttribute를 별도 메서드에 지정하면, 해당 컨트롤러를 호출할 때 
• 항상 model의 attribute에 "name"으로 data를 추가한다.

    @ModelAttribute("regions")
    public Map<String, String> regions(){
        Map<String, String> regions = new LinkedHashMap<>();//linkedHashMap쓰면 순서대로 들어감.순서보장.
        regions.put("SEOUL", "서울");
        regions.put("BUSAN", "부산");
        regions.put("JEJU", "제주");
        return regions;
    }

• add() 메서드가 깔끔해짐

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

 

 

4. addForm.html

---

• Thymeleaf 적용
  • th:each 적용 -> Model로 넘긴 regions 사용
  • th:field="${item.regions}" --> "*{regions}"
  • 따라서 체크한 값이 item.regions에 담김.
  • <label>은 chkeckbox의 id 를 알아야함.(label을 클릭해도 checkbox클릭됨)
    • 근데 th:field는 자동으로 id가 생성된다.심지어 루프를 돌기 때문에 별도로 지정 안한 상태.
    • 그러면 label 입장에서 checkbox id를 어떻게 가져오지?
    • #ids.prev(...) , #ids.next(...) 를 통해 동적으로 생성되는 id 값을 가져올 수 있음.

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

• 랜더링 결과

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

• _regions 는 앞서 설명한 기능이다. --> hidden만 넘어가면 false처리. 
  • 웹 브라우저에서 체크를 하나도 하지 않았을 때, 
  • 클라이언트가 서버에 아무런 데이터를 보내지 않는 것을 방지한다. 
  • 참고로 _regions 조차 보내지 않으면 결과는 null 이 된다.

 

 

5. item.html 추가

---

    <!-- multi checkbox -->
    <div>
        <div>등록 지역</div>
        <div th:each="region : ${regions}" class="form-check form-check-inline">
            <input type="checkbox" th:field="${item.regions}" th:value="${region.key}"
                   class="form-check-input" disabled>
            <label th:for="${#ids.prev('regions')}"
                   th:text="${region.value}" class="form-check-label">서울</label>
        </div>
    </div>

• 결과
  • checkbox가 어떻게 자동으로 check될까
  • 위와 같이 멀티 체크 박스에서 등록 지역을 선택해서 저장하면, 
  • 조회시에 checked 속성이 추가된 것을 확인할 수 있음.
  • 타임리프는 th:field 에 지정한 값과 th:value 의 값을 비교해서 체크를 자동으로 처리해준다
  • 즉 부산을 지정해서 저장했다면. item.regions에 "부산" 이저장되어있고
  • 루프를 돌면서 region.key를 통해 서울->부산->제주 순으로 값이 있는지 확인하며,
  • 두번 째 값인 부산이 있기 때문에. 두번 째 checkbox에 checked속성이 추가된다.

    <!-- multi checkbox -->
    <div>
        <div>등록 지역</div>
        <div class="form-check form-check-inline">
            <input type="checkbox" value="SEOUL"
                   class="form-check-input" disabled id="regions1" name="regions">
            <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" disabled id="regions2" name="regions" checked="checked">
            <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" disabled id="regions3" name="regions">
            <label for="regions3"
                   class="form-check-label">제주</label>
        </div>
    </div>

 

 

6. GitHub : 210923 multi check box

---

GitHub - bsh6463/Thymeleaf_Spring2