jquery spring – checkbox로 선택된 배열 주고 받기

mirinae.maru

■ checkbox로 선택된 값을 jquery를 이용하여 spring controller로 넘기는 예제이다. 선택된 값이 2개 이상 되지 않으면 넘기지 않고 선택된 값의 형제(?) 들의 값을 넘기고 spring controller에서 받는다.

▷ chkclass 클래스의 자식들 중에서 checked 된 것들을 모두 선택한다.
$(“.chkclass :checked”)

▷ chkclass 클래스의 자식들 중에서 checked 된 것들의 개수.
$(“.chkclass :checked”).size()

▷ chkclass 클래스의 자식들 중에서 id가 name인 것의 값.
$(this).parent().children(“#name”).val()

▷ id가 submitFrm인 버튼이 클릭되면 수행된다.
$(“#submitFrm”).on(“click”, function() {});

 
■ checkbox html

<button id="submitFrm">전송</button><br/><br/>		
<div class="chkclass">
  <div>
    <input type="checkbox" id="chk" name="chk1" value="chkVal1"/>chkVal1
    <input type="hidden" id="name" name="park" value="chkTxtVal1"/>
    <input type="hidden" id="age" value="23"/>
  </div>
  <div>
    <input type="checkbox" id="chk" name="chk2" value="chkVal2"/>chkVal2
    <input type="hidden" id="name" name="nm2" value="chkTxtVal2"/>
    <input type="hidden" id="age" value="25"/>
  </div>
  <div>
    <input type="checkbox" id="chk" name="chk3" value="chkVal3"/>chkVal3
    <input type="hidden" id="name" name="nm" value="chkTxtVal3"/>
    <input type="hidden" id="age" value="33"/>
  </div>
  <div>
    <input type="checkbox" id="chk" name="chk4" value="chkVal4"/>chkVal4
    <input type="hidden" id="name" name="nm" value="chkTxtVal4"/>
    <input type="hidden" id="age" value="36"/>
  </div>
  <div>
    <input type="checkbox" id="chk" name="chk5" value="chkVal5"/>chkVal5
    <input type="hidden" id="name" name="nm" value="chkTxtVal5"/>
    <input type="hidden" id="age" value="99"/>
  </div>
</div>

 
■ jquery javascript

$(document).ready(function() {
  $("#submitFrm").on("click", function() {
				
    if ( $(".chkclass :checked").size()<2 ) {
      alert("체크 개수가 2개 이하입니다.");
      return;
    }
    else {
      var param = "";
      $(".chkclass :checked").each(function() {
        if( param=="" ) 
          param = "name="+$(this).parent().children("#name").val();
        else param = param + "&name="+$(this).parent().children("#name").val();

        param = param + "&age="+$(this).parent().children("#age").val();
      });
					
      $.ajax({
        url : '/checkbox/updateChkBox',
        type : 'post',
        data : param,
        dataType : 'text',
        success : function(data) {
          console.log('return string : ' + data);
        },
        error : function() { console.log('error');}
      });
    }
  });
});

 
■ spring controller
▷ jquery client에서 name=chkTxtVal1&age=23&name=chkTxtVal2&age=25 값으로 spring controller에 전송되면 RequestParam 어노테이션을 이용하여(@RequestParam(value=”name”,required=true) List name, @RequestParam(value=”age”,required=true) List age) 값을 각각 받는다.

@Controller("CheckboxController.class")
@RequestMapping(value="/checkbox")
public class CheckboxController {

  private static final Logger log = LoggerFactory.getLogger(CheckboxController.class);
	
  @RequestMapping(value="/view")
  public String view(HttpServletRequest request, SampleVO vo) throws Exception {
    return "/checkbox/view";
  }
	
  @RequestMapping(value="/updateChkBox")
  public @ResponseBody String updateChkBox (
      HttpServletRequest request, 
      HttpServletResponse response, 
      @RequestParam(value="name",required=true) List<String> name,
      @RequestParam(value="age",required=true) List<Integer> age) throws Exception {
	
    log.debug( ">>> param size : " + name.size() );
		
    int i = 0;
    for( String value : name ){
      log.debug( ">>> name's value : " + value + "\tage : " + age.get(i) );
      i++;
    }
		
    return "success";
  }
}