SUM radio button values and checkboxes values in one calculation - javascript and html

问题

I am trying to calculate the values of radio buttons and checkboxes. I have the radio buttons working as required but cannot get the script right for the checkboxes. I want the check boxes to have a sub total (which is working fine) and then have that subtotal added to the calculation of the radio buttons. Below is what I have so far. Any suggestions would be appreciated. Thanks.

<form name="form1" id="form1" runat="server">
<legend>Header 1</legend>
    <p><input id="rdo_1" type="radio" value="3" name="price" onClick="DisplayPrice(this.value);"><label for="radio1">Radio 1</label></p>
    <p><input id="rdo_2" type="radio" value="2" name="price" onClick="DisplayPrice(this.value);"><label for="radio2">Radio 2</label></p>
    <p><input id="rdo_2" type="radio" value="1" name="price" onClick="DisplayPrice(this.value);"><label for="radio3">Radio 3</label></p>
</form>                    

<hr>

<form name="form2" id="form2" runat="server">
<legend>Header 2</legend>
    <p><input id="rdo_1" type="radio" value="100" name="price2" onClick="DisplayPrice(this.value);"><label for="rad1">Radio 1</label></p>
    <p><input id="rdo_2" type="radio" value="200" name="price2" onClick="DisplayPrice(this.value);"><label for="rad2">Radio 2</label></p>
</form>                             

<hr>

<form name="form3" id="form3" runat="server">
<legend>Header 3</legend>
    <p><input id="rdo_1" type="radio" value="3" name="price3" onClick="DisplayPrice(this.value);"><label for="ra1">Radio 1</label></p>
    <p><input id="rdo_2" type="radio" value="2" name="price3" onClick="DisplayPrice(this.value);"><label for="ra2">Radio 2</label></p>
    <p><input id="rdo_2" type="radio" value="1" name="price3" onClick="DisplayPrice(this.value);"><label for="ra3">Radio 3</label></p>
</form>      

<hr>
<form name="checkboxCalc" id="checkboxCalc">
    <p><input onClick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_FBB" id="check01" value="300"/><label for="check01">Check 1</label></p>
    <p><input onClick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_RHFG" id="check02" value="200"/><label for="check02">Check 2</label></p>
    <p><input onClick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_LHFG" id="check03" value="200"/><label for="check03">Check 3</label></p>
</form>

<br />
<form name="form4" id="form4" runat="server">
    <label for="check01">Sub Total:&nbsp;</label><input id="price4" type="text" name="price4" readonly="readonly" >
</form>

<script language="JavaScript" type="text/javascript">
    var total = document.getElementById("price4")
    function clickCh(caller){
    if(caller.checked){
    add(caller)
    } else {
    subtract(caller)
    }
    }
    function add(caller){   total.value = total.value*1 + caller.value*1}
    function subtract(caller){  total.value = total.value*1 - caller.value*1}
</script>
<hr>

<p><label for="valueTotal">Value$:</label>
<input type="text" name="valueTotal" id="valueTotal" value="" size="2" readonly="readonly"></p>

<script type="text/javascript">
function DisplayPrice(price){
    var val1 = 0;
    for( i = 0; i < document.form1.price.length; i++ ){
        if( document.form1.price[i].checked == true ){
            val1 = document.form1.price[i].value;
        }
    }

    var val2 = 0;
    for( i = 0; i < document.form2.price2.length; i++ ){
        if( document.form2.price2[i].checked == true ){
            val2 = document.form2.price2[i].value;
        }
    }

    var val3 = 0;
    for( i = 0; i < document.form3.price3.length; i++ ){
        if( document.form3.price3[i].checked == true ){
            val3 = document.form3.price3[i].value;
        }
    }

    var val4 = 0;
    for( i = 0; i < document.form4.price4.length; i++ ){
            val4 = document.form4.price4[i].value;
        }

    var sum=parseInt(val1) + parseInt(val2) + parseInt(val3) + parseInt(val4);
    document.getElementById('valueTotal').value=sum;
}
</script>

回答1:

In Javascript if there is single texbox of a specific name then length function will be return undefined.

Here you can do two things.

First there is only single field of subtotal so u can assign value direct to val4 like given below

val4 = document.form4.price4.value;

Second If you want to run for loop then

  var val4 = 0;
  var form4 = document.form4.getElementsByTagName('input');
  for( i = 0; i < form4.length; i++ ){
       if(form4[i].type == 'text' && form4[i].name == 'price4'){
          if(isNaN(parseInt(form4[i].value)) == false){
               val4 = parseInt(parseInt(val4) + parseInt(form4[i].value));
           }
       }

    }

Edited

In function

<script language="JavaScript" type="text/javascript">
      var total = document.getElementById("price4")
       function clickCh(caller){
           if(caller.checked){
             add(caller)
            } else {
           subtract(caller)
            }
            finalResult();
         }
       function add(caller){   total.value = total.value*1 + caller.value*1}
       function subtract(caller){  total.value = total.value*1 - caller.value*1}
        function finalResult(){
           var val1 = 0;
           for( i = 0; i < document.form1.price.length; i++ ){
             if( document.form1.price[i].checked == true ){
                 val1 = document.form1.price[i].value;
              }
             }

         var val2 = 0;
        for( i = 0; i < document.form2.price2.length; i++ ){
           if( document.form2.price2[i].checked == true ){
                val2 = document.form2.price2[i].value;
           }
          }

          var val3 = 0;
          for( i = 0; i < document.form3.price3.length; i++ ){
          if( document.form3.price3[i].checked == true ){
                    val3 = document.form3.price3[i].value;
           }
           }

           var val4 = 0;
          var form4 = document.form4.getElementsByTagName('input');
          for( i = 0; i < form4.length; i++ ){
           if(form4[i].type == 'text' && form4[i].name == 'price4'){
               if(isNaN(parseInt(form4[i].value)) == false){
                   val4 = parseInt(parseInt(val4) + parseInt(form4[i].value));
                 }
             }

            }

            var sum=parseInt(val1) + parseInt(val2) + parseInt(val3) + parseInt(val4);
            document.getElementById('valueTotal').value=sum;
        } 
    </script>

i hope it will be work for you

thanks

回答2:

In your code you are trying to add value of "price4" which is blank at start.... try adding value of "valueTotal" which is total of radiobuttons value

Try this code... same code with some modifications

<form name="form1" id="form1" runat="server">
<legend>Header 1</legend>
 <p>
 <input id="rdo_1" type="radio" value="3" name="price" onclick="DisplayPrice(this.value);"><label
      for="radio1">Radio 1</label></p>
  <p>
     <input id="rdo_2" type="radio" value="2" name="price" onclick="DisplayPrice(this.value);"><label
      for="radio2">Radio 2</label></p>
  <p>
      <input id="rdo_2" type="radio" value="1" name="price" onclick="DisplayPrice(this.value);"><label
      for="radio3">Radio 3</label></p>
  </form>
  <hr>
   <form name="form2" id="form2" runat="server">
    <legend>Header 2</legend>
   <p>
  <input id="rdo_1" type="radio" value="100" name="price2" onclick="DisplayPrice(this.value);"><label
      for="rad1">Radio 1</label></p>
   <p>
   <input id="rdo_2" type="radio" value="200" name="price2" onclick="DisplayPrice(this.value);"><label
      for="rad2">Radio 2</label></p>
    </form>
   <hr>
    <form name="form3" id="form3" runat="server">
    <legend>Header 3</legend>
    <p>
 <input id="rdo_1" type="radio" value="3" name="price3" onclick="DisplayPrice(this.value);"><label
      for="ra1">Radio 1</label></p>
      <p>
 <input id="rdo_2" type="radio" value="2" name="price3" onclick="DisplayPrice(this.value);"><label
      for="ra2">Radio 2</label></p>
   <p>
   <input id="rdo_2" type="radio" value="1" name="price3" onclick="DisplayPrice(this.value);"><label
      for="ra3">Radio 3</label></p>
   </form>
   <hr>
   <form name="checkboxCalc" id="checkboxCalc">
   <p>
   <input onclick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_FBB" id="check01"
      value="300" /><label for="check01">Check 1</label></p>
    <p>
     <input onclick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_RHFG"
      id="check02" value="200" /><label for="check02">Check 2</label></p>
    <p>
     <input onclick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_LHFG"
      id="check03" value="200" /><label for="check03">Check 3</label></p>
     </form>
     <br />
     <form name="form4" id="form4" runat="server">
     <label for="check01">
 Sub Total:&nbsp;</label><input id="price4" type="text" name="price4" readonly="readonly">
     </form>
     <p>
     <label for="valueTotal">
      Value$:</label>
     <input type="text" name="valueTotal" id="valueTotal" value="" size="2" readonly="readonly"></p>
     <script language="JavaScript" type="text/javascript">
 var total = document.getElementById("valueTotal")
 var result = document.getElementById("price4")
 function clickCh(caller)
 {
      if (caller.checked)
      {
           add(caller)
      } else
      {
           subtract(caller)
      }
 }
 function add(caller) { result.value = total.value * 1 + caller.value * 1 }
 function subtract(caller) { result.value = result.value * 1 - caller.value * 1 }
 </script>
 <hr>
 <script type="text/javascript">
 function DisplayPrice(price)
 {
      var val1 = 0;
      for (i = 0; i < document.form1.price.length; i++)
      {
           if (document.form1.price[i].checked == true)
           {
                val1 = document.form1.price[i].value;
           }
      }

      var val2 = 0;
      for (i = 0; i < document.form2.price2.length; i++)
      {
           if (document.form2.price2[i].checked == true)
           {
                val2 = document.form2.price2[i].value;
           }
      }

      var val3 = 0;
      for (i = 0; i < document.form3.price3.length; i++)
      {
           if (document.form3.price3[i].checked == true)
           {
                val3 = document.form3.price3[i].value;
           }
      }

      var val4 = 0;
      for (i = 0; i < document.form4.price4.length; i++)
      {
           val4 = document.form4.price4[i].value;
      }

      var sum = parseInt(val1) + parseInt(val2) + parseInt(val3) + parseInt(val4);
      document.getElementById('valueTotal').value = sum;
 }
   </script>

Thank you. hope it will work

来源：https://stackoverflow.com/questions/14190960/sum-radio-button-values-and-checkboxes-values-in-one-calculation-javascript-an

标签

javascript

html

radio-button

checkbox