반응형

체크 박스 - 멀티

 


체크 박스를 멀티로 사용해서, 하나 이상을 체크할 수 있도록 해보자.

  • 등록 지역
    • 서울, 부산, 제주
    • 체크 박스로 다중 선택할 수 있다.

 

FormItemController - 추가

 

@ModelAttribute의 특별한 사용법
등록 폼, 상세 화면, 수정 폼에서 모두 서울, 부산, 제주라는 체크 박스를 반복해서 보여주어야 한다.
이렇게 하려면 각각의 컨트롤러에서 model.addAttribute(...)을 사용해서 체크 박스를 구성하는 데이터를 반복해서 넣어주어야 한다.
@ModelAttribute는 이렇게 컨트롤러에 있는 별도의 메서드에 적용할 수 있다.
이렇게하면 해당 컨트롤러를 요청할 때 regions에서 반환한 값이 자동으로 모델(model)에 담기게 된다.
물론 이렇게 사용하지 않고, 각각의 컨트롤러 메서드에서 모델에 직접 데이터를 담아서 처리해도 된다.



addForm.html - 추가

  • th:for="${#ids.prev('regions")}"
    멀티 체크박스는 같은 이름의 여러 체크박스를 만들 수 있다. 그런데 문제는 이렇게 반복해야 HTML 태그를 생성할 때, 생성된 HTML 태그 속성에서 name은 같아도 되지만, id는 모두 달라야 한다.
    따라서 타임리프는 체크박스를 each루프 안에서 반복해서 만들 때 임의로 1, 2, 3 숫자를 뒤에 붙여준다.

each로 체크박스가 반복 생성된 결과 - id 뒤에 숫자가 추가


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


타임리프 HTML 생성 결과

<label for="id 값">에 지정된 idcheckbox에서 동적으로 생성된 regions1, regions2, regions3에 맞추어 순서대로 입력된 것을 확인할 수 있다.

 

로그 출력
FormItemController.addItem()에 코드 추가

서울, 부산 선택

로그: item.regions=[SEOUL, BUSAN]

지역 선택X

로그: item.regions=[]

_regions는 앞서 설명한 히든필드를 타임리프가 자동으로 추가해주는 기능으로 추가된 것이다. 웹 브라우저에서 체크를 하나도 하지 않았을 때, 클라이언트가 서버에 아무런 데이터를 보내지 않는 것을 방지한다. 참고로 _regions 조차 보내지 않으면 결과는 null이 된다.
_regions가 체크박스 숫자만큼 생성될 필요는 없지만, 타임리프가 생성되는 옵션 수 만큼 생성해서 그런 것이니 무시하자.

 

item.html - 추가

주의: item.html에는 th:object를 사용하지 않았기 때문에 th:field 부분에 ${item.regions}으로 적어주어야 한다.
disabled를 사용해서 상품 상세에서는 체크 박스가 선택되지 않도록 했다.


타임리프의 체크 확인
checked="checked"
멀티 체크 박스에서 등록 지역을 선택해서 저장하면, 조회시에 checked 속성이 추가된 것을 확인할 수 있다.
타임리프는 th:field에 지정한 값과 th:value의 값을 비교해서 체크를 자동으로 처리해준다.

 

editForm.html - 추가

 

반응형