테스트 사이트 - 개발 중인 베타 버전입니다

스크립트 질문입니다.. 채택완료

humanb2box 7년 전 조회 2,177

9가지 네임값을 가진 체크박스가 여러개 있습니다.

버튼을 클릭하면 체크된 벨류만 갖고 오고 싶어서 다음과 같이 코딩했는데요..

(길어서 aya1, aya2 만 넣어 놓았습니다.)

 

</p>

<p><tr>

                <th scope="row">인테리어</th>

                <td>

                    <ul class="btn_area nine_column after">

                        <li class="btn_li">

                            <input id="a" type="checkbox" name="aya1"  value="소폭 합지">

                            <label for="a">소폭 합지</label>

                        </li>

                        <li class="btn_li">

                            <input id="b" type="checkbox" name="aya1"  value="광폭 합지">

                            <label for="b">광폭 합지</label>

                        </li>

                        <li class="btn_li">

                            <input id="c" type="checkbox" name="aya1"  value="실크 벽지">

                            <label for="c">실크</label>

                        </li>

                        <li class="btn_li">

                            <input id="d" type="checkbox" name="aya1"  value="고급실크 벽지">

                            <label for="d">고급실크</label>

                        </li>

                        <li class="btn_li">

                            <input id="e" type="checkbox" name="aya1"  value="천연벽지">

                            <label for="e">천연벽지</label>

                        </li>

                    </ul>

                </td>

            </tr>

            <tr>

                <th scope="row">건설</th>

                <td>

                    <ul class="btn_area nine_column after">

                        <li class="btn_li">

                            <input id="f" type="checkbox" name="aya2"  value="몰딩">

                            <label for="f">몰딩</label>

                        </li>

                        <li class="btn_li">

                            <input id="g" type="checkbox" name="aya2"  value="걸레받이">

                            <label for="g">걸레받이</label>

                        </li>

                        <li class="btn_li">

                            <input id="h" type="checkbox" name="aya2"  value="문,문틀">

                            <label for="h">문,문틀</label>

                        </li>

                        <li class="btn_li">

                            <input id="i" type="checkbox" name="aya2"  value="아트월">

                            <label for="i">아트월</label>

                        </li>

                        <li class="btn_li">

                            <input id="j" type="checkbox" name="aya2"  value="기타">

                            <label for="j">기타</label>

                        </li>

                    </ul>

                </td>

            </tr>

            <div id="btn">버튼</div>

            <div id="content"></div>

<script type="text/javascript">

    $(function(){

        $("#btn").click(function(){

        for (i = 1; i <=2 ; i ++ ){ 

                var f = "aya"+i;

            $("input[name="+f+"]:checked").each(function() {

                f += $(this).val()+",";

            });

            }

            $("#content").html(f);

        })

    })

</script></p>

<p> </p>

<p>

 

인테리어와 건설 체크박스를 모두 체크해도 

두번째 건설의 벨류값만 가져와요.,,,

 

제가 뭘 잘못한걸까요.. 도움좀 부탁드립니다..

 

 

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
7년 전

var f 가 반복문 안에서 초기화 되고

마지막 i = 2 일때 연산된 f 만 최종적으로 $.html 로 표현하기 때문입니다.

 

아래와 같이 하면 간단하게 해결됩니다.

 

    $(function(){         $("#btn").click(function(){         var strs = "";         for (i = 1; i <=2 ; i ++ ){                  var f = "aya"+i;             $("input[name="+f+"]:checked").each(function() {                 // f += $(this).val()+",";                 strs += $(this).val()+",";             });             }             // $("#content").html(f);             $("#content").html(strs);         })     })

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

h
humanb2box
7년 전
진짜 헐이 나왔어요,, 마지막 연산된 f 만 나오는것 까지는 이해했는데..

새로운 변수를 넣을 생각은 꿈에도 못했네요,,,,

감사합니다..

정말 간단한 부분이었네요

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인