2

我正在尝试计算单选按钮和复选框的值。我有单选按钮按要求工作，但无法为复选框获取正确的脚本。我希望复选框有一个小计（工作正常），然后将该小计添加到单选按钮的计算中。以下是我到目前为止所拥有的。任何建议，将不胜感激。谢谢。

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

2 回答 2

0

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

我希望它对你有用

谢谢

于 2013-01-07T08:53:43.700 回答
0

在您的代码中，您尝试添加“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>

谢谢你。希望它会工作

于 2013-01-07T09:09:35.883 回答