체크박스 값 확인하기

체크박스를 이용해 체크된 값들을 

컨트롤러로 보내고 값을 확인해보자.

먼저 화면단에 테스트를 할수있도록 체크박스를

만들어 보자 난 부트스트랩을 이용하였다.

<div class="content">
    <form id="frmReq" method="get" action="welcomeWeb4.do" class="form-horizontal">
        <div class="form-group">
        <label>컨트롤러로 go</label>
        <input type="text" name = "name" class="form-control" placeholder="Username" value="Check Box">
        </div>
         <button class="btn btn-primary btn-fill btn-wd" id="primaryBtId">Submit</button>
         <label class="checkbox checkbox-inline">
         <input type="checkbox" name="btn" data-toggle="checkbox" value="aa">a
         </label>
 
         <label class="checkbox checkbox-inline">
         <input type="checkbox" name="btn" data-toggle="checkbox" value="bb">b
         </label>
 
        <label class="checkbox checkbox-inline">
        <input type="checkbox" name="btn" data-toggle="checkbox" value="cc">c
        </label>
        </form>
</div>

먼저 2line에서 form 태그에 id값으로 frmReq를 주었다

그리고 welcomeWeb4.do로 action 시켜준다.

그럼 이제 컨트롤러를 보자

@RequestMapping(value = "welcomeWeb4.do")
    public String initMain3(HttpServletRequest request, ModelMap model) throws Exception {
        
        String[] arr = request.getParameterValues("btn"); 
        model.addAttribute("arr",arr);
        return "Button/button.tiles";
    }

일단 request를 사용하기위해 HttpServletRequest 객체를 만든다.

다음 getParameterValues를 이용해 jsp단에서

체크한 체크박스의 값들을 가져와서 배열의 형태로 arr에 담는다.

getParameterValues 는 배열 형태의 결과값을 리턴한다.

보통 단일값을 가져올때는 getParameter를 이용하지만

체크박스는 여러개를 체크할수있기 때문에

체크된 모든 값을 가져와야 한다 때문에

getParameterValues 를 이용한다.

다음 model을 이용해 화면에 배열 arr을 뿌려준다.

다시 jsp를 보자

이제 jsp 에서 jstl를 사용해 체크값들을 확인해보자

<script type="text/javascript">
$(document).ready(function() {
    $("#defaultBtId0").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]}"/>

먼저 jsp에 도큐먼트 레디를 위와같이 만들어준다.

3line~4line

화면의 Submit버튼을 클릭할시 frmReq의 이름을 가진

form태그 안의 값들을 가지고 컨트롤러로 갈것이다.

6line 부터 조건을 걸어줬다.

만약에#aa값이 비어있다면 jstl을 실행한다. 이때의 aa는

input 의 id 이다.  value에 arr[0]이 들어가있는데

이것은 클릭 한 후 페이지가 넘어왔는지를 체크한다. 1개가 체크되었던

2개가 체크되었던 무조건 배열의 첫번째 요소는 넘어오게 되어있으므로

저렇게 설정 하였다.

7lline 의 items 는 컨트롤러에서 model로 뿌려준 배열값이다.

이것은 var을 이용해 arr로 선언해줬는데 이것은

jstl에서의 어떤 변수명으로 사용할지 선언을 해준것이다.