자바스크립트 부분에 한번 더 물어보겠습니다.
본문
지금 시험삼아 제작중인 사이트에 계산기 관련 폼을 만들고 있습니다.
먼저 질문드리고 싶은것은...
1, 위에 셀렉트박스에서 요금제 중 하나를 선택합니다.
2, 첫번째 셀렉트박스에서 band 종류 요금제를 선택하면 2번째 사진처럼 하단에 셀렉트박스가 생깁니다.
3, t 끼리 요금제를 선택하면 셀렉트를 3개선택 하는 셀렉트가 보입니다.
저는 이렇게 하단 셀렉트박스에서
예를 들면...
복지할인을 클릭하고 온가족 할인 10년이상 을 셀레트박스에서 선택하면 위에 요금 금액이
바뀌게 하고 싶습니다.
<table class="sit_ov_tbl">
<colgroup>
<col class="grid_3">
<col>
</colgroup>
<tbody>
<tr id="it_t_bandtype" style="display:none">
<th scope="row">SK 온가족할인</th>
<td>
<form id="form1" name="form1" method="post" action="">
<select name="it_t_bandtype" id="it_t_bandtype1" onChange="show3();">
<option value="0">미적용</option>
<option value="1">온가족할인 10년이상 (10%}</option>
<option value="2">온가족할인 20년이상 (20%}</option>
<option value="3">온가족할인 30년이상(50%}</option>
</select>
</form>
</td>
</tr>
<tr id="it_bandtype">
<th scope="row">SK 온가족할인</th>
<td>
<form id="form1" name="form1" method="post" action="">
<select name="it_bandtype1" id="it_bandtype1"onChange="show3(this.value);">
<option value="0">미적용</option>
<option value="1">온가족할인 10년이상 (10%}</option>
<option value="2">온가족할인 20년이상 (20%}</option>
</select>
</form>
</td>
</tr>
<tr>
<th scope="row">복지할인</th>
<td><input type="checkbox" name="halin2" value="1" id="halin02"onClick="show3();" > 할인35% <br ></td>
</tr>
<tr>
<th scope="row">부과세+할부이자</th>
<td><input type="checkbox" name="chek" value="1" id="chek01" onClick="show3();" ><br ></td>
</tr>
</tbody>
</table>
이게 체크버튼과 셀렉트 박스 입니다.
스크립트 부분은
function show3() {
var halin02 = document.getElementById("halin02").checked;
var chek01 = document.getElementById("chek01").checked;
var sk1 = document.getElementById("it_bandtype1").value;
var sk2 = document.getElementById("it_t_bandtype1").value;
// 모든 가격 숨기기.
document.getElementById("change7").style.display="none";
document.getElementById("change9").style.display="none";
document.getElementById("change10").style.display="none";
document.getElementById("change11").style.display="none";
document.getElementById("change12").style.display="none";
document.getElementById("change13").style.display="none";
document.getElementById("change14").style.display="none";
document.getElementById("change15").style.display="none";
document.getElementById("change16").style.display="none";
if( halin02 == true && chek01 == false) {
// 복지할인만
document.getElementById("change6").style.display="none";
document.getElementById("change7").style.display="none";
document.getElementById("change10").style.display="";
document.getElementById("change11").style.display="none";
document.getElementById("change12").style.display="";
document.getElementById("change13").style.display="none";
document.getElementById("change8").style.display="none";
document.getElementById("change8").style.display="none";
document.getElementById("change14").style.display="none";
document.getElementById("change15").style.display="none";
}else if( halin02 == false && chek01 == true) {
// 부과세만.
document.getElementById("change7").style.display="";
document.getElementById("change6").style.display="none";
document.getElementById("change10").style.display="none";
document.getElementById("change11").style.display="none";
document.getElementById("change9").style.display="";
document.getElementById("change8").style.display="none";
document.getElementById("change12").style.display="none";
document.getElementById("change13").style.display="none";
document.getElementById("change14").style.display="none";
document.getElementById("change15").style.display="none";
document.getElementById("change16").style.display="none";
}else if( halin02 == true && chek01 == true) {
// 복지할인 + 부과세
document.getElementById("change11").style.display="";
document.getElementById("change6").style.display="none";
document.getElementById("change7").style.display="none";
document.getElementById("change10").style.display="none";
document.getElementById("change13").style.display="";
document.getElementById("change8").style.display="none";
document.getElementById("change9").style.display="none";
document.getElementById("change12").style.display="none";
document.getElementById("change14").style.display="none";
document.getElementById("change15").style.display="none";
document.getElementById("change16").style.display="none";
}else if( sk1 =='1' ) {
// 온가족할인 band 요금제 10%
document.getElementById("change11").style.display="none";
document.getElementById("change6").style.display="none";
document.getElementById("change7").style.display="none";
document.getElementById("change10").style.display="none";
document.getElementById("change13").style.display="none";
document.getElementById("change8").style.display="none";
document.getElementById("change9").style.display="none";
document.getElementById("change12").style.display="none";
document.getElementById("change14").style.display="";
document.getElementById("change15").style.display="none";
document.getElementById("change16").style.display="none";
}else if (sk1=='2' && chek01 == true) {
alert("ddddd");
document.getElementById("change11").style.display="none";
document.getElementById("change6").style.display="none";
document.getElementById("change7").style.display="none";
document.getElementById("change10").style.display="none";
document.getElementById("change13").style.display="none";
document.getElementById("change8").style.display="none";
document.getElementById("change9").style.display="none";
document.getElementById("change12").style.display="none";
document.getElementById("change14").style.display="none";
document.getElementById("change15").style.display="";
document.getElementById("change16").style.display="none";
}else if (sk2=='1') {
alert("ddddd");
document.getElementById("change11").style.display="none";
document.getElementById("change6").style.display="none";
document.getElementById("change7").style.display="none";
document.getElementById("change10").style.display="none";
document.getElementById("change13").style.display="none";
document.getElementById("change8").style.display="none";
document.getElementById("change9").style.display="none";
document.getElementById("change12").style.display="none";
document.getElementById("change14").style.display="none";
document.getElementById("change15").style.display="none";
document.getElementById("change16").style.display="";
위에 처럼 있습니다.
document.getElementById("change16").style.display="";
이렇게 스타일로 정해진것들은..
<h2 style="padding:15px; font-size:14px; color:#fff; text-align:center; background-color:#30292f;" >월 납부금액<br /><font style="font-size:12px; color:#b5afb4;">월할부금 + 월 통신요금</font></h2>
<tr id="change6" >
<td align="center" style="padding:10px; background-color:#f9f9f9;"><font style="font-size:22px; color:#f65672;"><span id="a6"> 0</span></font> 원</td> <!--부과세 미포함 공시지원금 실납부액-->
</tr>
<tr id="change7" style="display:none" >
<td align="center" style="padding:10px; background-color:#f9f9f9;"><font style="font-size:22px; color:#f65672;"><span id="a9"> 0</span></font> 원</td><!--부과세 포함 공시지원금 실납부액-->
</tr>
위에 처럼 요금이 나오게 하기위한 효과를 준것이고..
이 요금은 db에 저장되어있으며...그값을 불러오는 소스는
<script>
function bandtype1(v){
var a;
var b;
var c;
var d;
var e;
var f;
var g;
var h;
var i;
var j;
var k;
var l;
var n;
var n1;
var n2;
var e1;
var e2;
var o;
var pub1;
var pub2;
var pub3;
var pub4;
var pub5;
var pub6;
var pub7;
var pub8;
var band1;
var band2;
var band3;
var tband1;
switch(v){
case '1' : a= "<?=number_format($it['it_support29']); ?>"; break; //밴드요금제 선택시 요금제별로 값이 바뀌는 함수.
case '2' : a ="<?=number_format($it['it_support36']); ?>"; break;
case '3' : a ="<?=number_format($it['it_support42']); ?>"; break;
case '4' : a ="<?=number_format($it['it_support47']); ?>"; break;
case '5' : a ="<?=number_format($it['it_support51']); ?>"; break;
case '6' : a ="<?=number_format($it['it_support59']); ?>"; break;
case '7' : a ="<?=number_format($it['it_support69']); ?>"; break;
case '8' : a ="<?=number_format($it['it_support80']); ?>"; break;
case '9' : a ="<?=number_format($it['it_support100']); ?>"; break;
case '10' : a ="<?=number_format($it['it_t_support35']); ?>"; break;
case '11' : a ="<?=number_format($it['it_t_support45']); ?>"; break;
case '12' : a ="<?=number_format($it['it_t_support55']); ?>"; break;
case '13' : a ="<?=number_format($it['it_t_support69']); ?>"; break;
case '14' : a ="<?=number_format($it['it_t_support80']); ?>"; break;
case '15' : a ="<?=number_format($it['it_t_support85']); ?>"; break;
case '16' : a ="<?=number_format($it['it_t_support100']); ?>"; break;
default : a = 0; break; //공시지원금
}
switch(v){
case '1' : b= "<?=number_format($it['it_support29_2']); ?>"; break;
case '2' : b ="<?=number_format($it['it_support36_2']); ?>"; break;
case '3' : b ="<?=number_format($it['it_support42_2']); ?>"; break;
case '4' : b ="<?=number_format($it['it_support47_2']); ?>"; break;
case '5' : b ="<?=number_format($it['it_support51_2']); ?>"; break;
case '6' : b ="<?=number_format($it['it_support59_2']); ?>"; break;
case '7' : b ="<?=number_format($it['it_support69_2']); ?>"; break;
case '8' : b ="<?=number_format($it['it_support80_2']); ?>"; break;
case '9' : b ="<?=number_format($it['it_support100_2']); ?>"; break;
case '10' : b ="<?=number_format($it['it_t_support35_2']); ?>"; break;
case '11' : b ="<?=number_format($it['it_t_support45_2']); ?>"; break;
case '12' : b ="<?=number_format($it['it_t_support55_2']); ?>"; break;
case '13' : b ="<?=number_format($it['it_t_support69_2']); ?>"; break;
case '14' : b ="<?=number_format($it['it_t_support80_2']); ?>"; break;
case '15' : b ="<?=number_format($it['it_t_support85_2']); ?>"; break;
case '16' : b ="<?=number_format($it['it_t_support100_2']); ?>"; break;
default : b = 0; break; //나나모바일 지원금
}
switch(v){
case '1' : c= "<?=number_format ($it['it_base29']); ?>"; break;
case '2' : c ="<?=number_format ($it['it_base36']); ?>"; break;
case '3' : c ="<?=number_format ($it['it_base42']); ?>"; break;
case '4' : c ="<?=number_format ($it['it_base47']); ?>"; break;
case '5' : c ="<?=number_format ($it['it_base51']); ?>"; break;
case '6' : c ="<?=number_format ($it['it_base59']); ?>"; break;
case '7' : c ="<?=number_format ($it['it_base69']); ?>"; break;
case '8' : c ="<?=number_format ($it['it_base80']); ?>"; break;
case '9' : c ="<?=number_format ($it['it_base100']); ?>"; break;
case '10' : c ="<?=number_format ($it['it_t_base35']); ?>"; break;
case '11' : c ="<?=number_format ($it['it_t_base45']); ?>"; break;
case '12' : c ="<?=number_format ($it['it_t_base55']); ?>"; break;
case '13' : c ="<?=number_format ($it['it_t_base69']); ?>"; break;
case '14' : c ="<?=number_format ($it['it_t_base80']); ?>"; break;
case '15' : c ="<?=number_format ($it['it_t_base85']); ?>"; break;
case '16' : c ="<?=number_format ($it['it_t_base100']); ?>"; break;
default : c = 0; break; //기본료
}
document.getElementById("a6").innerHTML = f;
document.getElementById("a7").innerHTML = g;
document.getElementById("a1").innerHTML = a;
document.getElementById("a2").innerHTML = b;
document.getElementById("a3").innerHTML = c;
document.getElementById("b1").innerHTML = c;
document.getElementById("a4").innerHTML = d;
document.getElementById("a5").innerHTML = e;
document.getElementById("a10").innerHTML = j;
document.getElementById("a11").innerHTML = k;
document.getElementById("a12").innerHTML = l ;
}
}
위에 같은 방식으로 스크립트를 만들었습니다.
그리고 이 스크립트는
<tr>
<th scope="row">요금제선택</th>
<td>
<form id="form1" name="form1" method="post" action="">
<select name="select" id="select" onChange="bandtype1(this.value)">
<option value="0" selected>요금제선택</option>
<option value="1">band 데이터 29</option>
<option value="2">band 데이터 36</option>
<option value="3">band 데이터 42</option>
<option value="4">band 데이터 47</option>
<option value="5">band 데이터 51</option>
<option value="6">band 데이터 59</option>
<option value="7">band 데이터 69</option>
<option value="8">band 데이터 80</option>
<option value="9">band 데이터 100</option>
<option value="10">T끼리 35</option>
<option value="11">T끼리 45</option>
<option value="12">T끼리 55</option>
<option value="13">T끼리 69</option>
<option value="14">T끼리 80</option>
<option value="15">T끼리 85</option>
<option value="16">T끼리 100</option>
</select>
</form>
</td>
</tr>
제일 처음 사진에 나오는 셀렉트박스에서 하나하나 선택하면 ..
작동되게 되어있습니다.
즉...제가 궁금한것은
else if (sk1=='2' && chek01 == true) {
alert("ddddd");
이렇게 함수를 만들어서...
복지할인 체크하고 셀렉트박스에서 선택하면 그 값이 요금금액이 나오게 하는건데..
셀렉트박스와 체크박스는 동시에 저렇게 함수를 주면 안 먹히는 건가요?
답변 2
네.. 저렇게 구성하는 방식은 옳지 않습니다.
if... else if...else
라고 구문은 예를 들어서 sk1==1 이라는 것인 if문이면 sk1이 1이 아닌 2나 3인 경우가 else if가 되는 것이고
sk1이 1, 2, 3 이 아닌 다른 값이 else 가 되는 겁니다.
지금처럼 sk1 뿐만 아니라 chek01 에 대한 부분도 같이 처리하기 위해서는
sk1인 경우에 che01값이 얼마이냐 처럼 단일 if문이 아닌 이중 if(즉, if문안에 if문)문 형식으로 조건을 비교해야 정상 작동할 것입니다.