一個計算中的SUM單選按鈕值和複選框值 - javascript和html

Question

我正在嘗試計算單選按鈕和複選框的值。 我有單選按鈕按要求工作，但無法獲取複選框的腳本。 我希望複選框有一個小計（工作正常），然後將小計添加到單選按鈕的計算中。以下是我到目前爲止。 任何建議，將不勝感激。 謝謝。

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

Answer 1

在JavaScript中，如果there is single texbox of a specific name then length function will be return undefined。

在這裏你可以做兩件事。

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

val4 = document.form4.price4.value; 

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

    } 

編輯

在功能

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

我希望這將是WO RK你

感謝

Answer 2

在你的代碼嘗試添加的「price4」，這是在啓動空白值....嘗試添加「valueTotal」的值，它是總單選按鈕值的

試試這個代碼...一些修改代碼

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

謝謝。希望它可以工作