체크박스, 라디오시 작성방법
본문
수량을 입력하면 곱하기 합산되는 스크립트입니다.
체크박스선택시, 라디오버튼 선택시 등을 추가하고 싶은데
input type을 checkbox나 radio로 바꾸고
onChange를 onClick 으로 바꿨는데
값이 NaN이 되서요.
조언 부탁드립니다.
<form name="cnjform">
<br><br><center>견적서 자동 계산</center><br><br>
<table cellspacing=1 cellpadding="5" border=0 align="center" bgcolor="#CCCCCC">
<tr>
<td align="center" bgcolor="#FFFFCC">제품명</td>
<td align="center" bgcolor="#FFFFCC">가격</td>
<td align="center" bgcolor="#FFFFCC">수량</td>
<td align="center" bgcolor="#FFFFCC">비용</td>
</tr>
<tr>
<td bgcolor="white">제품1</td>
<td align="right" bgcolor="white">2,000원</td>
<td bgcolor="white"><input type="text" class="cnj_input" name="cnjnum1" onKeyup="javascript:Chage_Money(1);onlyNum(cnjform.cnjnum1);" onChange="javascript:Chage_Money(1)" ; size="3" maxlength="3" style="text-align:center;"></td>
<td align="right" bgcolor="white"><input type="text" class="cnj_input" name="cnjcost1" size="7" readonly style="text-align:right;"> 원</td>
</tr>
<!--체크박스선택시-->
<tr>
<td bgcolor="white">제품2<br>제품3
</td>
<td align="right" bgcolor="white">3,500원<br>5,500원
</td>
<td bgcolor="white">
<input type="checkbox" class="cnj_input" name="cnjnum2" onKeyup="javascript:Chage_Money(2);onlyNum(cnjform.cnjnum2);" onClick="javascript:Chage_Money(2)" ; size="3" maxlength="3" style="text-align:center;"><br>
<input type="checkbox" class="cnj_input" name="cnjnum3" onKeyup="javascript:Chage_Money(3);onlyNum(cnjform.cnjnum3);" onClick="javascript:Chage_Money(3)" ; size="3" maxlength="3" style="text-align:center;">
</td>
<td align="right" bgcolor="white"><input type="text" class="cnj_input" name="cnjcost2" size="7" readonly style="text-align:right;"> 원<br>
<input type="text" class="cnj_input" name="cnjcost3" size="7" readonly style="text-align:right;"> 원
</td>
</tr>
<!--라디오선택시-->
<tr>
<td bgcolor="white">제품4<br>제품5
</td>
<td align="right" bgcolor="white">500원<br>10,500원
</td>
<td bgcolor="white">
<input type="radio" class="cnj_input" name="cnjnum4" onKeyup="javascript:Chage_Money(4);onlyNum(cnjform.cnjnum4);" onclick="javascript:Chage_Money(4)" ; size="3" maxlength="3" style="text-align:center;"><br>
<input type="radio" class="cnj_input" name="cnjnum5" onKeyup="javascript:Chage_Money(5);onlyNum(cnjform.cnjnum5);" onClick="javascript:Chage_Money(5)" ; size="3" maxlength="3" style="text-align:center;">
</td>
<td align="right" bgcolor="white"><input type="text" class="cnj_input" name="cnjcost4" size="7" readonly style="text-align:right;"> 원<br>
<input type="text" class="cnj_input" name="cnjcost5" size="7" readonly style="text-align:right;"> 원
</td>
</tr>
<tr>
<td align="right" colspan="2" bgcolor="white">합 계 </td>
<td align="right" colspan="2" bgcolor="white"><input type="text" class="cnj_input" name="total_cost" size="10" readonly style="text-align:right;"> 원</td>
</tr>
</table>
</form>
<script language="JavaScript">
document.write('<style>');
document.write('.cnj_input { border-width:1; border-style:solid; border-color:#000000; color:#0084D4; background-color:white;}');
document.write('</style>');
// 견적서 자동 계산하기
function onlyNum(objtext1) {
var inText = objtext1.value;
var ret;
for (var i = 0; i < inText.length; i++) {
ret = inText.charCodeAt(i);
if ((ret < 48) || (ret > 57)) {
alert("숫자만을 입력하세요");
objtext1.value = "";
objtext1.focus();
return false;
}
}
return true;
}
var uppmesg;
price_p = new Array(5); // 총 배열 숫자
price_p[0] = 2000; // 첫번째 제품 가격
price_p[1] = 3500; // 두번째 제품 가격
price_p[2] = 5500; // 세번째 제품 가격
price_p[3] = 500; // 네번째 제품 가격
price_p[4] = 10500; // 다섯번째 제품 가격
// 추가시
// price_p[추가번호] = 가격; // 추가 제품 가격
total_cost = 0; // 합계 기본값
size_cost = new Array(0,0,0,0,0); // 배열숫자 만큼 0추가
function Chage_Money(num) {
var f = document.cnjform;
getcost(num)
total_cost = 0;
for (i=0; i<5; i++) { // 총 배열숫자와 동일해야함
total_cost += size_cost[i];
f.total_cost.value = eval(total_cost);
}
}
// 아래는 수정할 필요 없음
function getcost(stype){
var f = document.cnjform;
tempcost = 0;
temp = "f.cnjnum";
temp += stype;
tempcost += eval(temp + ".value") * price_p[stype-1];
cnjcost = "cnjcost" + stype + "";
f.elements[cnjcost].value = tempcost;
size_cost[stype-1] = tempcost;
}
//-->
</SCRIPT>
답변을 작성하시기 전에 로그인 해주세요.
