체크 박스 - 단일(1)

체크박스 사용 방법에 대해서 공부 해보았다.

 

 

우선 상품 판매 여부를 체크할 수 있는 체크 박스를 addForm.html에 추가하였다.

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

 

 

로그를 남겨서 실행후 값이 잘 넘어오는지를 확인해보면 문제점을 확인할 수 있다.

 

체크를 하지 않으면 null값이 넘어오는데, 이를 수정할 수 있는 방법에 대해서 공부하였다.

FormItemController        : item.open=true //체크 박스를 선택하는 경우
FormItemController        : item.open=null //체크 박스를 선택하지 않는 경우

 

 

체크 해제를 인식하기 위해서 약간의 트릭을 사용하는데

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

 

<input type = "hidden" name ="_open" value="on">을 추가해줘서 체크해제를 할경우 false값을 받아올 수 있다.

 

이러한 과정의 원리는 다음과 같다

●체크 박스 체크

   - 스프링MVC가 open에 값이 있는것을 확인하고 사용한다(_open은 무시)

 

●체크 박스 미체크

   - 스프링MVC가 _open만 있는 것을 확인하고 open의 값이 체크되지 않았다고 인식한다. 따라서 null이 아니라 false를 받아온다.