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

체크박스, 라디오시 작성방법 채택완료

망이망소이 7년 전 조회 2,411

수량을 입력하면 곱하기 합산되는 스크립트입니다.

 

체크박스선택시, 라디오버튼 선택시 등을 추가하고 싶은데

input type을 checkbox나 radio로 바꾸고 

onChange를 onClick 으로 바꿨는데

값이 NaN이 되서요.

 

조언 부탁드립니다.

 

</p>

<p><form name="cnjform">



<center>견적서 자동 계산</center>



<table cellspacing=1 cellpadding="5" border=0 align="center" bgcolor="#CCCCCC"></p>

<p><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></p>

<p><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></p>

<p> </p>

<p> </p>

<p> </p>

<p><!--체크박스선택시-->

<tr>

<td bgcolor="white">제품2
제품3

</td>

<td align="right" bgcolor="white">3,500원
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;">


<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;"> 원


<input type="text" class="cnj_input"  name="cnjcost3" size="7" readonly style="text-align:right;"> 원

</td>

</tr></p>

<p> </p>

<p> </p>

<p> </p>

<p>

<!--라디오선택시-->

<tr>

<td bgcolor="white">제품4
제품5

</td>

<td align="right" bgcolor="white">500원
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;">


<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;"> 원


<input type="text" class="cnj_input"  name="cnjcost5" size="7" readonly style="text-align:right;"> 원

</td></p>

<p></tr></p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p>

<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></p>

<p>

<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)) {</p>

<p>        alert("숫자만을 입력하세요");

        objtext1.value = "";

        objtext1.focus();

        return false;

        }

        }

        return true;

        }</p>

<p>        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[추가번호] = 가격;  // 추가 제품 가격</p>

<p>               

        total_cost = 0;  // 합계 기본값

        size_cost = new Array(0,0,0,0,0); // 배열숫자 만큼 0추가</p>

<p>

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);

    }

  }</p>

<p>// 아래는 수정할 필요 없음

  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></p>

<p>

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

답변 1개

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

해당 input 에 value='값' 을 넣어 주세요 

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

답변에 대한 댓글 1개

망이망소이
7년 전
가르쳐주셔서 감사합니다^^

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

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

로그인