html의 form에서 선택된 checkbox의 값만 넘겨주려면 input:checkbox의 name값을 배열로 만들어주면 된다.
예를들어 checkbox의 이름을 checkList라고 할거라면
<html> <head> <!-- 중략 --> </head> <body> <!-- 중략 --> <input type="checkbox" name="checkList[]" value="값1" /> <input type="checkbox" name="checkList[]" value="값2" /> <input type="checkbox" name="checkList[]" value="값3" /> </body> </html>이렇게 name 값 뒤에 [] 배열 선언만 해주면 된다.
이렇게 체크한 값의 값만 배열로 넘어가게 된다.
// 기존 코드 $("input:checkbox[name=checkList]:checked");그렇다면 jQuery에서 해당 값을 선택하려면 기존의 코드에서 변경해야할 것이다.
어떻게 해야되나 한참 삽질하던 찰나에 쉬운 방법을 찾았다.
참고한 사이트: //chicpro.dev/jquery-input-%EB%B0%B0%EC%97%B4%EC%9D%BC-%EB%95%8C-selector/
[jQuery] input 배열일 때 selector – CHICPRO
chicpro.dev
// 기존 코드 $("input:checkbox[name=checkList]:checked"); // 변경 코드 $("input:checkbox[name='checkList[]']:checked");이렇게 name 값을 따옴표로 감싸주면 된다는 것이였다.
테스트해보니 정상적으로 동작하였다 ㅎㅎ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <script> $(document).ready( function() { // for 문으로 가져 올 경우 $("#BtnFor").click(function(){ var size = $("input[name='EMAIL']").length; for(i=0;i<size;i++){ alert( i + "번째 메일주소 : " + $("input[name='EMAIL']").eq(i).attr("value") ); } }); // each 로 가져올 경우 $("#BtnEach").click(function(){ $("input[name='EMAIL']").each(function (i) { alert( i + "번째 메일주소 : " + $("input[name='EMAIL']").eq(i).attr("value") ); }); }); }); </script> <body> <tr> <td><input type="text" name="EMAIL" id="EMAIL" value="" ></td> <td><input type="text" name="EMAIL" id="EMAIL" value="" ></td> <td><input type="text" name="EMAIL" id="EMAIL" value="" ></td> </tr> <tr> <button id="BtnFor"> 버튼FOR </button> <button id="BtnEach"> 버튼EACH </button> </tr> </body> | cs |
동일한 NAME이 여러개 생성될 때 참조 하시면 됩니다.