채택완료

스크립트 질문입니다..

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

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

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

 

Copy
<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>

 

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

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

2948935394_1517379155.6781.jpg

 

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

 

 

|

답변 1개 / 댓글 1개

채택된 답변
+20 포인트

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개

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

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

감사합니다..

정말 간단한 부분이었네요

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