Jquery serialize 시 주의 사항 checkbox 값 안넘어 가는 문제

 

Jquery serialize 시 주의 사항 checkbox 값 안넘어 가는 문제

 

jquery serialize 를 사용하면 form에 있는 파라메터를 쉽게 전달 할 수 있습니다.

하지만 체크박스 사용시에는 문제가 좀 있는데,

체크된 체크박스의 name만 넘어가고 값은 전달이 되지 않는 다는 것이죠.

 

예를 들면

 

<form id="frm" action="">

<input type="checkbox" id="lane1Yn" name="lane1Yn" /><label for="lane1Yn">1차로</label>

<input type="checkbox" id="lane2Yn" name="lane2Yn" /><label for="lane2Yn">2차로</label>

</form>

 

$(function(){

var params = $('#frm').serialize(); 

console.log(param);

});

 

이렇게 폼의 값을 serialize 할때

만약 체크박스를 하나도 체크 하지 않았다면 빈값이 넘거가고

체크를 한다면

lane1Yn=&lane2Yn=

이런식으로 넘어가게 됩니다.

 

위에서 말한 것과 같이 name은 넘어가지만 값은 넘어가지 않죠.

 

값을 넘기는 방법은 두가지가 있습니다.

 

 

첫번째 방법은 serializeArray 를 사용해 배열로 form의 값을 받아 선택되었다면 값을 넣어주는 방법입니다.

(serialize 도 체크박스가 선택되지 않으면 값 자체가 들어가지 않아요.)

 

var params = $('#frm').serializeArray();

if($('#lane1Yn').is(':checked')){

params[0].value = 'Y'

}

if($('#lane2Yn').is(':checked')){

params[1].value = 'Y'

}

 

하지만 이 방법을 사용하면 서버단에서 파라메터를 배열로 받도록 바꿔주어야 하죠.

그래서 두번째 방법은

체크가 되어있다면 serialize전에 체크박스에 값을 넣어주는 방법입니다.

 

 

 

if($('#lane1Yn').is(':checked')){
     $('#lane1Yn').val('Y');
}

if($('#lane2Yn').is(':checked')){
     $('#lane2Yn').val('Y');
}
var params = $('#frm').serialize();

 

이렇게 하면 선택되었을떄는 Y가 선택이 안되면 아무값도 넘어가지 않게 됩니다.

 

'lane1Yn=Y&lane2Yn=Y'         or       ''

 

form serialize 사용시 checkbox 가 있다면 위의 주의점을 잊지 말고 처리 해주세요~