[JS] Form & Checkbox

 

 

체크박스를 포함하고 있는 form 을 제출하면, form은 체크된 요소의 value값을 서버로 전송한다. 

=> 체크 여부에 상관없이 값을 서버로 전송하고 싶다면?

 

 

방법1.  type="hidden" 활용.

<form method="post" action="/submit">

    <!-- 체크안된 경우 N 전송 -->
    <input type="hidden" name="chkYn" value="N">
    
    <!-- 체크된 경우 Y 전송 -->
    <input type="checkbox" name="chkYn" value="Y">
    
</form>

체크 X =>  폼데이터에 chkYn=N 만 적용되어 전송

체크 O =>  폼데이터에 chkYn=N & chkYn=Y 형태로 적용되어 전송 

 

이후에는 서버에서 어떤 방식으로 값을 받느냐에 따라 달라진다.

 

 - request.getParameter("chkYn") 로 값을 가져오는 경우.

  => key값이 중복되는 경우 값을 덮어쓰게 되어 마지막 값인 'Y'를 가져온다.

 

- Map<String, String> formData 로 값을 가져오는 경우

  => key값이 중복되는 경우 값을 덮어쓰게 되어 마지막 값인 'Y'를 가져온다.

 

 - DTO에서 String chkYn 으로 선언된 경우.

  => 변수가 중복되는 경우 값을 덮어쓰게 되어 마지막 값인 'Y'를 가져온다.

 

 - DTO에서 List<String> chkYn 으로 선언된 경우.

  => list 인 [ "N", "Y" ] 형태로 가져온다.

 

** FormData 객체로 변환 시 중복된 name(key)에 대한 value값들은 배열 형태로 저장된다.

 

---

 

방법2. form 전송 직전 체크박스 속성 checked처리.

(아래처럼 list에 체크박스 데이터쌍이 여러개 포함되고, Json형태로 묶어서 서버에 formData 형태로 전송되는 경우였음)

<form method="post" action="/submit">
    <div id="chkDiv">
        <c:forEach var="data" items="${serverData}">   
            <!-- 생략 -->
            
            <input type="checkbox" name="chkYn" value="${data.chkYn}" 
                   <c:if test="${data.chkYn == 'Y'}">checked</c:if> />
            <input type="text" name="inputText" value="${data.inputText}">

            <!-- 생략 -->
        <c:forEach var="data" items="${serverData}">
    </div>
</form>

=> 서버에서 serverData 리스트를 가져와서

   chkYn 값에 따라 체크 or 체크해제 상태로 보여지도록 세팅한 상태.

 

const chkYn = document.getElementsByName("chkYn");

for (let i = 0; i < chkYn.length; i++) {

    // 체크 여부에 따라 value 값을 "Y" 또는 "N"으로 설정
    chkYn[i].value = chkYn[i].checked ? "Y" : "N";
    
    // 모든 체크박스를 체크 상태로 설정
    chkYn[i].checked = true;
}

=> 체크여부로 value값을 동적으로 설정해주고, 

  최종적으로 모든 체크박스를 체크처리하면 필요한 chkYn 값들을 서버로 전송할 수 있다.

 

** 기존 로직을 최소한으로 수정하면서 간단한 방식을 찾으려다보니 해본 방법..!