체크박스 체크된 것들 JSTL로 확인하기

체크박스 체크된 것들을 가져와서 어떻게 컨트롤러에서 처리할까?

먼저 간단한 체크박스를 만들어보자. 부트스트랩을 이용하였다.

체크박스 소스

<div class="content">
    <form id="frmReq" method="get" action="requestParamTest.do" class="form-horizontal">
    
        <div class="form-group">
            <label>컨트롤러로 go</label>
            <input type="text" name = "nameBtn" class="form-control" placeholder="Username" value="JSTL-test">
        </div>
              
        <label class="checkbox checkbox-inline">
            <input type="checkbox" name="myBtn" data-toggle="checkbox" value="aa">a
        </label>
 
        <label class="checkbox checkbox-inline">
            <input type="checkbox" name="myBtn" data-toggle="checkbox" value="bb">b
        </label>
 
        <label class="checkbox checkbox-inline">
            <input type="checkbox" name="myBtn" data-toggle="checkbox" value="cc">c
        </label>
    </form>
</div>

line 2 : 폼태그의 액션을 주었다. 이 url을 컨트롤러에서 매칭해주면 되겠다.

체크 버튼을 눌러서 체크를 해보자.

컨트롤러에 보내야 하므로 아무 버튼이나 만들어서 버튼에 클릭 이벤트를 등록해서 컨트롤러로 넘어가게 하자.

컨트롤러를 보자.

@RequestMapping(value="requestParamTest.do")
    public String initRequest(HttpServletRequest request, ModelMap model) throws Exception {
        
        String[] arr = request.getParameterValues("myBtn");
        
        System.out.println("파라미터이름:"+request.getParameterNames());
        
        model.addAttribute("arr", arr);
        return "button/btnTest.tiles";
}

.do 매칭을 RequestMapping으로 설정해주고 아까 체크된 버튼들을 가져 오는 부분을 보자.

request.getParameterValues("myBtn")의 파라미터 이름은 <input type="checkbox" name="myBtn" data-toggle="checkbox" value="cc">c 에서 name 부분과 일치해야 한다. 이렇게 되면 배열이 리턴된다.

getParamterValues에 대해 자세히 알아보자. 

문서를 참조해보았다. 

Returns an array라고 되어있다. 바로 array형태의 결과값을 리턴을 하는데 하나의 값이면 길이가 1로 나온다고 한다. 없다면 null 을 리턴한다. 그렇다면 아까 버튼의 name이 myBtn인 것들이 2개가 체크되었다면 2개가 넘어오게 될 것이다.

자 그러면 이제 jsp를 보자. jstl로 확인 차 alert만 찍어볼 것이다. 활용은 개발자 몫이다.

<script type="text/javascript">
 
$(document).ready(function() {
    
    $("#controlBtn").click(function(){
        $("#frmReq").submit();
     });
     
     if($("#aa").val()!=""){
        <c:forEach items="${arr}" var="arr" varStatus="status">
           alert('<c:out value="${arr}"/>');
        </c:forEach>
     }    
});
 
 
</script>
 
<input type="hidden" id="aa" name="aa" value="${arr[0]}"/>
 

line5 ~ line 7 : 임의의 버튼을 눌러서 컨트롤러로 가게 만드는 것이다. frmReq는 아까 체크박스들을 감싸고 있던 폼의 id이다. submit을 쳐주면 폼 안의 체크박스 정보를 가지고 컨트롤러로 갈 것이다.

line 9 : 여기서부터 jstl체크이다. 초기에는 당연히 alert이 안뜰 것이다(체크가 되어있지 않으므로) 

만약에 #aa의 값이 비어있다면 jstl을 실행한다. 여기서 aa는 hidden input의 아이디 이다. line 19는 그것을 정의하였다. value에는 arr[0]이 들어가 있는데 이것은 클릭 한 후 페이지가 넘어왔는지를 체크한다. 1개가 체크되었던 2개가 체크되었던 무조건 배열의 첫번째 요소는 넘어오게 되어있으므로 편의상 저렇게 설정하였다.

line 10 : items는 컨트롤러 단 line8에서 모델 어트리뷰트로 넘긴 키 값(arr)이다. 이것을 var = "arr" 로 설정하였는데 jstl내에서 어떤 이름으로 쓰일지를 결정하는 것이다. varStatus는 효과적인 jstl사용법을 위한 부분인데 여기서 쓰이지 않으므로 넘어간다.

<c:out으로 값을 찍는다. forEach를 사용했으므로 arr의 길이만큼 반복문이 돌 것이다. 

여기서는 스크립트 안에서 찍기만 했는데 실제 개발에서는 컨트롤러에서 체크박스 정보를 가지고 뭐 디비에 저장한다던지 다른 서비스를 통하여 가공하여 뷰쪽에 내릴떄는 가공된 데이터를 넘겨서 jstl을 사용할 것이다. 이 포스팅은 체크박스 값을 전달하는것이 목적이므로 여기까지 설명하겠다.