[Web Programming] Checkbox 다중 값 전달

checkbox가 포함된 form 태그와 값을 반환할 div 영역을 아래와 같이 구성한다.

<form onchange="async()" id="form-id">
  <div>
    <label>Language : </label>
    <input type="checkbox" name="type1" value="java">
    <label for="type1">java</label>
    <input type="checkbox" name="type2" value="cpp">
    <label for="type2">cpp</label>
    <input type="checkbox" name="type3" value="python">
    <label for="type3">python</label>
    <input type="checkbox" name="type4" value="javascript">
    <label for="type4">javascript</label>
  </div>
</form>

<div id="div-id">
<!-- load area -->
</div>

비동기 방식으로 처리하기 위해 submit 버튼 대신 onchange 이벤트로 값을 전달하며

다중 값 전달을 위해 name 값을 서로 다르게 지정한다.

 

<script type="text/javascript">
	function async() {
		$.ajax({
			url : 'type',
			type : 'post',
			data : $('#form-id').serializeArray(),
			success : function(data) {
				$('#div-id').html(data);
			}
		});
	};
</script>

form 태그에서 선택한 값들이 serializeArray() 를 통해 Map 객체로 controller에 전달되며

이때 checkbox 외에 다른 select, radio ... 더 다양한 입력 값을 한꺼번에 전달 가능하다.

결과적으로 처리한 값을 html() 로 id 값으로 지정한 div 영역 내부에 반환한다.

 

@Data
@Alias("type")
public class TypeDTO {
	private List<String> type;
}

넘어온 값을 담을 dto 를 생성하는데 checkbox 의 다중 값을 저장하기 위해 List 객체로 생성한다.

이러한 형태의 객체는 동적 쿼리로 활용 가능하다.

 

@RequestMapping("type")
public String type(@RequestParam HashMap<String, String> map, TypeDTO type) throws Exception {

	List<String> typeList = new ArrayList<>();
	for (String key : map.keySet()) {
		if (key.contains("type"))
			typeList.add(map.get(key));
	}
    
	type.setType(typeList);
        ...

@RequstParam 어노테이션으로 Map 객체를 전달받고 name 값을 key값으로써 각각의 value 값을 반환한다.

이때 name 값들을 서로 다르게 명칭하였으므로 contains() 를 활용해 다중으로 선택된 값을 식별한다.

이 값들을 List 객체에 각각 저장하고 dto에 전달한다.