체크박스 - 단일 2

• 흠.. 근데 앞의 글 처럼 Single Check box 사용 시 매번 히든 필드를 넣어줘야 하나? 귀찮은데..
• Thymeleaf가  제공하는 폼 기능을 사용하면 자동으로 처리 가능.

 

1. Thymeleaf 적용

1.1 상품 등록 페이지에 적용

---

• 적용 전

        <!-- single checkbox -->
        <div>판매 여부</div>
        <div>
            <div class="form-check">
                <input type="checkbox" id="open" th: name="open" class="form-check-input">
                <input type="hidden" name="_open" value="on"/> <!--히든 필드 추가 -->
                <label for="open" class="form-check-label">판매 오픈</label>
            </div>
        </div>

• 적용 후
  • th:field="${item.open}" 적용 및 name 삭제
    • th:object="${item}" 지정했기 때문에, th:field="*{open}"으로 수정 가능.
  • 히든필드 삭제.

        <!-- single checkbox -->
        <div>판매 여부</div>
        <div>
            <div class="form-check">
                <input type="checkbox" id="open" th:field="${item.open}" class="form-check-input">
                <label for="open" class="form-check-label">판매 오픈</label>
            </div>
        </div>​

• 랜더링 결과
  • th:field를 적용 했기 때문에, name과 value도 같이 생성해줌.
  • hidden field도 같이 생성해줌. 와!

 <!-- single checkbox -->
        <div>판매 여부</div>
        <div>
            <div class="form-check">
                <input type="checkbox" id="open" class="form-check-input" name="open" value="true">
                <input type="hidden" name="_open" value="on"/>
                <label for="open" class="form-check-label">판매 오픈</label>
            </div>
        </div>

• 실행결과(check 안함)

2021-09-23 09:54:23.861  INFO 24704 --- [nio-8080-exec-6] h.i.web.form.FormItemController 
: item.open=false

 

1.2 제품 상세 페이지에 적용

---

• 제품 등록 페이지와 유사
• 제품 상세 페이지에서는 체크 변경이 불가능 해야함. -> disabled 추가.

    <!-- single checkbox -->
    <div>판매 여부</div>
    <div>
        <div class="form-check">
            <input type="checkbox" id="open" th:field="${item.open}" class="formcheck-input" disabled>
            <label for="open" class="form-check-label">판매 오픈</label>
        </div>
    </div>

 

• 랜더링 결과
  • checked="check" 속성이 추가됨.
  • 체크 박스에서 판매 여부를 선택해서 저장하면, 조회시에 checked 속성이 추가된 것을 확인할 수 있다.
  • 타임리프의 th:field 를 사용하면, 값이 true(on)인 경우 체크를 자동으로 처리해줌.

<!-- single checkbox -->
<div>판매 여부</div>
  <div>
    <div class="form-check">
    <input type="checkbox" id="open" class="formcheck-input" disabled name="open" value="true" checked="checked">
    <label for="open" class="form-check-label">판매 오픈</label>
  </div>
</div>

• 체크 안한 경우
  • checked속성이 없다.

<!-- single checkbox -->
<div>판매 여부</div>
  <div>
    <div class="form-check">
    <input type="checkbox" id="open" class="formcheck-input" disabled name="open" value="true">
    <label for="open" class="form-check-label">판매 오픈</label>
  </div>
</div>

 

 

 

1.3 상품 수정에 적용.

---

• 상품 수정을 클릭하고 판매 여부 변경 후 저장해도 값이 반영되지 않는다..?
• 원인은 update() 메서드에 해당 부분이 없기 때문 ㅋㅋ
• 변경 전

    public void update(Long itemId, Item updateParam) {
        Item findItem = findById(itemId);
        findItem.setItemName(updateParam.getItemName());
        findItem.setPrice(updateParam.getPrice());
        findItem.setQuantity(updateParam.getQuantity());
    }

• 변경 후

    public void update(Long itemId, Item updateParam) {
        Item findItem = findById(itemId);
        findItem.setItemName(updateParam.getItemName());
        findItem.setPrice(updateParam.getPrice());
        findItem.setQuantity(updateParam.getQuantity());
        
        findItem.setOpen(updateParam.getOpen());
        findItem.setRegions(updateParam.getRegions());
        findItem.setItemType(updateParam.getItemType());
        findItem.setDeliveryCode(updateParam.getDeliveryCode());
        
    }

 

 

2. GitHub : 210923 single checkbox

---

GitHub - bsh6463/Thymeleaf_Spring2