스크립트 질문입니다..
본문
9가지 네임값을 가진 체크박스가 여러개 있습니다.
버튼을 클릭하면 체크된 벨류만 갖고 오고 싶어서 다음과 같이 코딩했는데요..
(길어서 aya1, aya2 만 넣어 놓았습니다.)
<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>
인테리어와 건설 체크박스를 모두 체크해도
두번째 건설의 벨류값만 가져와요.,,,
제가 뭘 잘못한걸까요.. 도움좀 부탁드립니다..
답변 1
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);
})
})
진짜 헐이 나왔어요,, 마지막 연산된 f 만 나오는것 까지는 이해했는데..
새로운 변수를 넣을 생각은 꿈에도 못했네요,,,,
감사합니다..
정말 간단한 부분이었네요
