타임리프 Thymeleaf 체크박스 배열값 checked 방법

체크박스는 name 이 같기 때문에 파라미터값이 배열 형태 입니다. 체크박스의 value 값이 파라미터 배열값에 존재하는지 확인하고 checked 하는 방법 입니다. 

 

일단 체크박스를 구성하는 형태는 2가지가 있을 수 있습니다. 체크박스의 목록이 코드성으로 list 형태로 내려받아 구성하는 방법 하나와 

직접 html 코드로 구성하는 방법 두가지 입니다.

 

 

1. 직접 html 코드로 구성된 체크박스의 checked 방법

---

값이 없으면 true 를 리턴해 체크하게 하고 값이 있으면 존재여부를 체크해서 true 또는 false 를 리턴하게 됩니다.

<div class="col_inner">
  <div class="tit">프로모션상태</div>
  <div class="cont">
    <div class="input_check_wrap">
      <input type="checkbox" id="srchUsgYn-1" class="input_check" name="srchUsgYn" value="W" th:checked="${ #lists.isEmpty(srchDto.srchUsgYn) ? true : #strings.contains(srchDto.srchUsgYn, 'W') }">
      <label for="srchUsgYn-1">대기</label>
      <input type="checkbox" id="srchUsgYn-2" class="input_check" name="srchUsgYn" value="I" th:checked="${ #lists.isEmpty(srchDto.srchUsgYn) ? true : #strings.contains(srchDto.srchUsgYn, 'I') }">
      <label for="srchUsgYn-2">진행중</label>
      <input type="checkbox" id="srchUsgYn-3" class="input_check" name="srchUsgYn" value="N" th:checked="${ #lists.isEmpty(srchDto.srchUsgYn) ? true : #strings.contains(srchDto.srchUsgYn, 'N') }">
      <label for="srchUsgYn-3">중단</label>
      <input type="checkbox" id="srchUsgYn-4" class="input_check" name="srchUsgYn" value="E" th:checked="${ #lists.isEmpty(srchDto.srchUsgYn) ? true : #strings.contains(srchDto.srchUsgYn, 'E') }">
      <label for="srchUsgYn-4">종료</label>
    </div>
  </div>
</div>

 

 

2. list 형태로 서버에서 내려받아 구성한 체크박스의 checked 방법

---

<div class="col_inner">
  <div class="tit">판매상태</div>
  <div class="cont">
    <div class="input_check_wrap">
        <th:block th:each="data, i : ${anpPrslStCdList}">
            <input type="checkbox" class="input_check" name="srchAnpPrslStCd"
                   th:id="'srchAnpPrslStCd-' + ${data.comcode}"
                   th:value="${data.comcode}"     
                   th:field="*{srchDto.srchAnpPrslStCd}"                                             
            >
            <label th:for="'srchAnpPrslStCd-' + ${data.comcode}"> [[${data.codeNm}]]</label>
        </th:block>

    </div>
  </div>
</div>

 

th:field 로 체크박스 checked 를 사용할 경우 자동으로 name 에 _ 가 붙은 input 이 생성되어 스타일에 영향을 주는 경우가 생기는대 그런 경우 

$(document).ready(function(){

    $('input[name="_srchAnpPrslStCd"]').remove();

});

해주시면 스타일에 영향없이 체크박스 이용이 가능합니다.