form 태그 input 값 배열로 전송

form 태그에서 CheckBox를 배열로 사용해서 다음과 같이 작성해서

<form id="form1" name="form1" method="post" action="">

<input type="checkbox" name="chk[]" value="aaa" />

<input type="checkbox" name="chk[]" value="bbb" />

<input type="checkbox" name="chk[]" value="ccc" />

<input type="checkbox" name="chk[]" value="ddd" />

</form>

두번째와 네번째 체크박스를 선택하고 전송하게 되면 다음과 같이 값이 넘어가게 된다.

[chk] => Array
    (
        [0] => bbb
        [1] => ddd
    )

그런데 경우에 따라 체크박스의 체크에 따라 다른 input의 값도 선택적으로 보낼 필요가 있다.
이런 경우 자바스크립트로 간단히 해결할 수 있다.

HTML태그와 자바스크립트 작성 예

 

01	<form id="form1" name="form1" method="post" action="" onsubmit="_submit(this);">

02	<!-- row 1 -->

03	<input type="checkbox" name="chk[]" value="aaa" />

04	<input type="hidden" name="field_a[]" value="111" />

05	<input type="hidden" name="field_b[]" value="가가가" />

06	<!-- row 2 -->

07	<input type="checkbox" name="chk[]" value="bbb" />

08	<input type="hidden" name="field_a[]" value="222" />

09	<input type="hidden" name="field_b[]" value="나나나" />

10	<!-- row 3 -->

11	<input type="checkbox" name="chk[]" value="ccc" />

12	<input type="hidden" name="field_a[]" value="333" />

13	<input type="hidden" name="field_b[]" value="다다다" />

14	<!-- row 4 -->

15	<input type="checkbox" name="chk[]" value="ddd" />

16	<input type="hidden" name="field_a[]" value="444" />

17	<input type="hidden" name="field_b[]" value="라라라" />

18

19

20	<input type="submit" name="Submit" id="button" value="Submit" />

21

</form>

22

23

24	<!-- ... -->

25

26

27	<script language='JavaScript'>

28	function _submit(f)

29

{

30	//같이 보낼 값 정리

31	if (typeof(f.elements['chk[]'].length) == 'undefined') //단일

32

{

33	if (f.elements['chk[]'].checked==false)

34

{

35	f.elements['field_a[]'].disabled=true;

36	f.elements['field_b[]'].disabled=true;

37

}

38	} else { //다중

39	for (i=0; i<f.elements['chk[]'].length; i++)

40

{

41	if (f.elements['chk[]'][i].checked==false)

42

{

43	f.elements['field_a[]'][i].disabled=true;

44	f.elements['field_b[]'][i].disabled=true;

45

}

46

}

47

}

48	return true;

49

}

50

</script>

각 열마다 chk라는 체크박스와 그에 따른 값 field_a와 filed_b가 있다.
chk[0] 체크박스의 체크 박스에 따라 field_a[0]과 field_b[0]의 전송 여부가 결정되게 하고자 한다.
form태그에 onsubmit 속성을 써주어 전송될때 이벤트를 자바스크립트 함수 _submit 으로 추가 처리하도록 했다.
자바스크립트로 chk를 하나씩 반복하며 체크가 안되어있는 열은 input함수에 disabled 속성을 추가해줘 전송하지 않도록 한다.
이때 주의해야할점은 위 예제의 경우는 chk[]의 수가 일정하지만 php등으로 페이지를 가공할때를 대비하여 chk[]가 하나일경우를 위해 단일과 다중 부분을 나눠서 코딩해야 한다.

이렇게 작성하고 역시 두번째와 네번째를 선택후 전송하면

[chk] => Array
    (
        [0] => bbb
        [1] => ddd
    )
[field_a] => Array
    (
        [0] => 222
        [1] => 4444
    )
[field_b] => Array
    (
        [0] => 나나나
        [1] => 라라라
    )

[출처] form 태그 input 값 배열로 전송|작성자 Lets Go