[JSP] 다중 체크박스(CheckBox) 선택 여부 확인

■ 다중 체크박스 만들기

 체크 박스 만드는 방법은 간단하다. Input 에 Type 을 checkbox로 선택하면 간단하게 체크박스 하나를 만들 수 있다. 

<input type="checkbox" id="size" name="size" value="3호"/>3호

 다중 체크 박스도 간단하게 만들 수 있따. 하나의 체크박스들을 여러개 붙여서 만들면 끝이다.

<input type="checkbox" id="size" name="size" value="3호"/><font size="2">3호</font>

<input type="checkbox" id="size" name="size" value="5호"/><font size="2">5호</font>

<input type="checkbox" id="size" name="size" value="9호"/><font size="2">9호</font>

<input type="checkbox" id="size" name="size" value="13호"/><font size="2">13호</font>

<input type="checkbox" id="size" name="size" value="15호"/><font size="2">15호</font>

<input type="checkbox" id="size" name="size" value="XS"/><font size="2">XS</font>

<input type="checkbox" id="size" name="size" value="S"/><font size="2">S</font>

<input type="checkbox" id="size" name="size" value="M"/><font size="2">M</font>

<input type="checkbox" id="size" name="size" value="L"/><font size="2">L</font>

<input type="checkbox" id="size" name="size" value="XL"/><font size="2">XL</font>

<input type="checkbox" id="size" name="size" value="XXL"/><font size="2">XXL</font>

 현재 사용하고 있는 다중 체크 박스 이미지 이다.

■ 현재 체크되어 있는 체크박스는 ?

 JSP 상에서 현재 선택이 되어져있는 체크박스가 무엇인지 알 수 있는 방법은 없는 것인가? 물론 있다. 예를 들어 버튼을 눌렀을 때, 동일한 name에 있는 체크박스들의 체크 여부를 확인하여 어떠한 value 값이 선택되어 있는지 알 수 있다.

 Ajax를 이용하여 버튼 형식으로 사용을 하였으며, 여러개의 다중 체크 값들을 하나의 변수에 담아보았다.

$('#btnChk').click(function() {

var gSize = "";

$("input[name=size]:checked").each(function() {

if(gSize == ""){

gSize = $(this).val();

} else {

gSize = gSize + "," + $(this).val();

}

});

$('#gSize').val(gSize);

});

 btnChk 라는 버튼이 눌렸을 때, size라는 name을 가진 체크박스들을 확인하여 눌린 체크박스의 value값을 가져오도록 코딩을 하였다.

 gSize라는 새로운 변수를 만들어서 눌린 체크박스의 값을 ',(콤마)'를 이용하여 하나의 변수에 만들어보았으며, 최종으로 만들어진 gSize 값을 hidden(히든)에 담아서 Controller로 보내주었다.

 이런식으로 한다면, 다중 체크박스의 값들을 손쉽게 하나의 변수에 담아서 사용할 수 있으며, 자바단에서 크게 손을 볼 필요도 없게된다.

관련글 더 보기

 2015/07/03 - [JavaScript] 랜덤(Random) 숫자 / 난수 만드는 방법

 2015/07/02 - [JSP] 숫자 변환 포맷 (3자리 마다 콤마 찍기)

 2015/07/02 - [JSP] JSP에서 include 사용하는 방법 (file, page)

 2015/07/02 - [JSP] 에러 페이지 처리방법 (web.xml)

 2015/07/02 - [JSP] HTTP 에러코드 정리 모음

↓ 공감 을 눌러주시면 블로거에게 큰 힘이 됩니다 !