라디오버튼 과 콤보상자를 이용한 계산방법

</p>

<p><form name="form1">

   <table style="width:100%; border-top:2px solid #000; font-size:15px; ">  

      <tr>

         <td height="50"> 가격계산 </td>

         <td>

              <input type="radio" name="main" value="1000" onClick="calculate()">

              사과

              <input type="radio" name="main" value="5000" onClick="calculate()">

              배

              <input type="hidden" value="6" name="main_count" >

              <input type="text" name="main_sum" size=10 readonly value="0">

         </td>

      </tr>

      <tr>

         <td height="50"> 수량 </td>

         <td>

              <input type="radio" name="count" value="1" onClick="calculate()">

              1개

              <input type="radio" name="count" value="2" onClick="calculate()">

              2개

              <input type="hidden" value="6" name="count_count" >

              <input type="text" name="count_sum" size=10 readonly value="0">

         </td>

      </tr>

      <tr>

          <td height="50"> 수량 </td>

          <td> 

              <select name="ccount" onchange="calculate()">

                  <option value="1">1 개</option>

                  <option value="2">2 개</option>

                  <option value="3">3 개</option>

                  <option value="4">4 개</option>

                  <option value="5">5 개</option>

              </select>

              <div id='result'></div>

          </td>

      </tr>

      <tr>

          <td>

              <input type=text name="total3" size=10 value="0" style="background:#f4f4f4; font-size:24px;font-weight:bold;color:red;border:0;">

              <span>원(VAT별도)</span>

          </td>

      </tr>

   </table>

</form></p>

<p><script language="javascript"> 

function calculate() {

    var mainRadio = document.querySelector('input[name="main"]:checked');

    var countRadio = document.querySelector('input[name="count"]:checked');

    var countSelect = document.querySelector('select[name="ccount"]');

    var mainCount = document.form1.main_count.value;

    var countCount = document.form1.count_count.value;

    var mainSum = 0;

    var countSum = 0;

    

    if (mainRadio) {

        mainSum = mainRadio.value * mainCount;

    }

    if (countRadio) {

        countSum = countRadio.value * countCount;

    }

    if (countSelect) {

        countSum = countSelect.value * countCount;

    }

    

    document.form1.main_sum.value = mainSum;

    document.form1.count_sum.value = countSum;

    document.form1.total3.value = mainSum + countSum;

    document.form1.total3.value = comma(document.form1.total3.value);

}</p>

<p>function comma(num) {

    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

}

</script>

</p>

<p><input type="radio" name="myRadio" value="1000"> 사과

<input type="radio" name="myRadio" value="5000"> 배

<input id="myInput">




<select id="mySelect">

    <option value="1">1개</option>

    <option value="2">2개</option>

    <option value="3">3개</option>

    <option value="4">4개</option>

    <option value="5">5개</option>

</select>




<span id="mySpan"></span></p>

<p> </p>

<p><script>

for (i of document.querySelectorAll("input[name='myRadio']")) {

    i.onclick = function() { myInput.value = this.value; }

}

mySelect.onchange = function() { mySpan.innerHTML = Number(myInput.value) * Number(this.value); }

</script></p>

<p>