Question

我有多组单选按钮，其中每组的选定值需要添加并显示给用户。到目前为止，我一直在更改switch语句中函数中的值来处理添加。

<form name="config" id="config">
<div class="row-fluid">
    <h3>Memory</h3>
    <input type="radio" name="section1" value="4gb" onclick="changePrice(0)" checked>4gb<br>
    <input type="radio" name="section1" value="8gb" onclick="changePrice(100)">8gb (+$100)<br>
    <input type="radio" name="section1" value="16gb" onclick="changePrice(200)">16gb (+$200)
</div>
<div class="row-fluid">
    <h3>Primary Hard Drive</h3>
    <input type="radio" name="section2" value="dell" onclick="changePrice(0)" checked>Dell<br>
    <input type="radio" name="section2" value="asus" onclick="changePrice(100)">Asus(+$100)
</div> 
</form>
<div id="price"></div>

我现在使用的脚本是

var displayPrice = document.getElementById("price");
var baseNum = 200;
displayPrice.innerHTML = baseNum;

function(changePrice){
    var val1, val2;
    switch(document.config.section1.value){
        case "4gb":
            val1 = 0;
            break;
        case "8gb":
            val1 = 100;
            break;
        case "16gb":
            val1 = 200;
            break;
        default:
            val1 = 0;
    }
    switch(document.config.section2.value){
        case "dell":
            val1 = 0;
            break;
        case "asus":
            val1 = 100;
            break;
        default:
            val1 = 0;
    }
    var sum = val1 + val2 + baseNum;
    displayPrice.innerHTML = sum;
}

有没有办法可以使用通过changePrice函数传递的参数进行这些计算（所以我不必更改switch语句中的值）？

Answer 1

如果您将功能定义更改为以下内容，则会接受您的参数。

function changePrice(val1)

如果您可以更改每个输入字段的value属性以包含增量值，则可以更轻松地计算总和。（这可能不适合您要解决的问题。

使用jQuery的基本解决方案

var sum = $("input[name=section1]").val() + $("input[name=section2]").val();

如果您的列表很长，您可以使用jQuery迭代单选按钮集

var sum = 0;
$("input[type=radio]").each(function(){sum += $(this).val();});

Answer 2

以下是没有jQuery的方法。

您需要告诉changePrice函数哪个部分应该更改价格，因此您需要将调用更改为changePrice(1, 100)，其中1是部分，100是价格变动。然后你可以单独收集所有的部分价格并总结如下：

var displayPrice = document.getElementById("price");
var baseNum = 200;
displayPrice.innerHTML = baseNum;
var sections = {};

function changePrice(section,val){
    // add or update the section value
    sections[section] = val;
    // start with the base price
    var sum = baseNum;
    // loop over all the sections and add them to the base price
    for(var key in sections) {
      sum = sections[key] + sum;
    }
    displayPrice.innerHTML = sum;
}

Here's a jsfiddle

Answer 3

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

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

            var sum=parseInt(val1) + parseInt(val2);
            document.getElementById('totalSum').innerHTML=sum;
        }
    </script>
</head>
<body>
    Choose a number:<br>
    <form name="form1" id="form1">
        <br>
        R1&nbsp;<input id="rdo_1" type="radio" value="5" name="R1" onClick="DisplayPrice(this.value);" checked>5
        <br>
        R1&nbsp;<input id="rdo_2" type="radio" value="10" name="R1" onClick="DisplayPrice(this.value);">10
        <br>
    </form>

    Choose another number:<br>
    <form name="form2" id="form2">
        <br>
        R2&nbsp;<input id="rdo_1" type="radio" value="15" name="R2" onClick="DisplayPrice(this.value);" checked>15
        <br>
        R2&nbsp;<input id="rdo_2" type="radio" value="20" name="R2" onClick="DisplayPrice(this.value);">20
        <br>
    </form>
   Your total is Rs = <span name="totalSum" id="totalSum" > 20</span>


</body>
</html>

如何使用参数而不是值来获取单选按钮组的总和

3 个答案: