在一次计算中求和单选按钮值和复选框值 - javascript 和 html

2022-01-21 00:00:00 checkbox radio-button javascript 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>

推荐答案

在Javascript中，如果有一个特定名称的texbox，那么length函数将返回undefined.

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

在这里你可以做两件事.

Here you can do two things.

第一个小计只有一个字段，因此您可以直接将值分配给val4，如下所示

val4 = document.form4.price4.value;

第二个如果要运行for循环那么

  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>

希望对你有用

谢谢

相关文章