serialize()사용 시 checkbox값 전송 안되는 문제해결방법

보통 form내의 input태그 값들을 Ajax를 이용해 서버로 보내기 위한 과정에서 serialize() 함수를 이용해왔다.
근데 이번에 checkbox가 무수히 많이 필요한 화면 개발을 하면서
serialize()는 checkbox의 체크된 값만 적용되며, 체크되지 않은 값은 무시한다는 것을 알게 됐다.

 

---

아래는 serialize() 함수에 대한 jQuery API 공식문서의 일부이다.

여기서 우리의 문제를 해결해 줄 포인트로, jQuery serialize는
① 오직 form태그에 포함되어 있는 요소들만을 취급한다는 것과
② input태그의 "radio"와 "checkbox"타입에서 체크 표시가 된 값만 포함한다고 나와있다.

 

즉, serialize()는 checkbox에서 체크되지 않은 값은 제외한다는 뜻인데, 저는 체크가 되지 않았을 때의 값도 반드시 필요했습니다. 아래 JSP코드를 보면, 서버(DB)로부터 받은 addressCheck에 'Y'값이 있다면 checkbox에 체크가 되어있어야 하고, 되어있지 않더라도 언제든지 수정&조회가 가능해야 했습니다.

<c:choose>
  <c:when test="vo.addressCheck eq 'Y'}">
     <input type="checkbox" name="addressCheck" id="addressCheck" value="Y" checked> <label for="addressCheck">주소등록 여부</label>
  </c:when>
  <c:otherwise>
     <input type="checkbox" name="addressCheck" id="addressCheck" value="Y"> <label for="addressCheck">주소등록 여부</label>
  </c:otherwise>
</c:choose>

이 문제를 해결하기 위해 찾아보니 javaScript부분에서 serialize로 input들 값을 모두 가져온 후, 체크가 안된 checkbox를 별도로 셋팅해 줄 수밖에 없다고 한다.

const dataForm = $(document.forms["basicForm"]).serializeObject();

dataForm["addressCheck"] = $("input#addressCheck").is(":checked") ? "Y" : "N" ;

console.log( dataForm.addressCheck ); // "Y" or "N"

① form태그 안의 값들을 serializeObject() 함수를 이용해 객체로 합칩니다.

※ serialize()는 form에 있는 element들을 문자열 하나로 합치는 형태(예: a=1&b=2&a=1&b=2&c=3&d=4)이며, serializeObject()는 객체 형태(예: { a="1", b="2", c="3", d="4" } )로 만들기 때문에 키/값 추가를 쉽게 하기 위해 사용했습니다.

② 삼항연산자와 jQuery의 is()함수를 이용해 체크가 되어있으면 "Y", 아니라면 "N"값을 객체에 넣어줍니다.

③ 콘솔에서 객체 내 값을 직접 확인.

 

 

form내의 input값들을 서버로 보내기위해 묶어준 후, 추가 및 수정하는 방식에 따라 serialize() 또는 serializeArray(), serializeObject()를 이용하시면 됩니다.