Question

<head>
<script type="text/javascript">
function myFunction(amount)
{
  a=200;
  b=amount;
  c=a+b;

  document.getElementById("demo").innerHTML=a;
  document.getElementById("demo1").innerHTML=b;
  document.getElementById("demo2").innerHTML=c;
}
</script>

</head>
<body>

我有两类单选按钮，如

蛋糕名称

 <input type="radio"  id= "c1" name="cake1" value="50.00" 
        onclick="if(this.value==50.00)  { myFunction(50.00); }">
 <input type="radio"  id= "c2" name="cake2" value="100.00">

-next is flower

<input  type="radio"  id= "f1" name="flow1" value="50.00">
<input  type="radio"  id= "f2" name="flow2" value="100.00">

现在问题是我的基本价格为200.只要我选择第一个单选按钮cake1，价格就会增加到250(200+50)

接下来，如果我选择值为100的鲜花列，则价格应增加到(250+100)=350。这应该动态发生。有人可以帮助我。

Answer 1

您是否打算让人们只选择一种蛋糕或两者兼而有之？

我问的原因是因为一旦选择了一个单选按钮，除非有另一个具有相同Name属性的单选按钮，否则你不能取消选择它。您实际上有一个单选按钮列表，只能由用户“打开”。

如果您希望他们只选择几个蛋糕中的一个，请为所有单选按钮指定相同的名称属性，浏览器将只允许选择一个。

如果您希望人们选择一个或多个蛋糕，请使用复选框（<input type="checkbox" etc .. >），以便他们可以取消勾选。

我认为你最好通过一般功能来重新整理整个页面 - 例如下面......

<!DOCTYPE html>

<head>
<script type="text/javascript">
function recalculate() {
    var sValues ="";
    var fTotal=200; // base value
    var inp=document.getElementsByTagName("input")
    for (var i=0;i < inp.length; i++)
    {
        sValues +=inp[i].name+" = " + inp[i].value+"\n"
        if (inp[i].checked) {fTotal+=parseInt(inp[i].value)}
    }

// not displayed but at this point sValues holds a string of the input names and values.  just alert(sValues) to see it

    document.getElementById("Total").innerHTML= fTotal;
}
</script>
</head>


<body> 

<form name="form1">
cake1 £50 <input type="radio"  id= "c1" name="cake" value="50.00"  onclick="recalculate()" ><br>
cake 2 £100 <input type="radio"  id= "c2" name="cake" value="100.00"  onclick="recalculate()"><br>

flower 1 £50 <input  type="radio"  id= "f1" name="flow" value="50.00"  onclick="recalculate()"><br>
flower 2 £50 <input  type="radio"  id= "f2" name="flow"  value="100.00"  onclick="recalculate()"><br>

<hr>
Total: £<div id="Total">0</div>
</form>
</body>

</html>

Answer 2

我假设你想要选择一个蛋糕或一朵花或两者，然后根据以下内容获得价格：当你选择一个蛋糕时，总价值将是它的价值加上200，如果你只选择花总数将是100加上它的值，最后如果你选择蛋糕和花（或花或蛋糕），我们添加两个值加200（蛋糕基）+ 100（花基）。如果是这样，那么我使用了这个：file1.php：

<!DOCTYPE html>
<html>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

    <script>

            function getTotal(){

                var data = "";
                var cake = $('[name="cake"]:checked').val();
                var flower = $('[name="flower"]:checked').val();

                if(cake !== undefined && flower === undefined){
                    data = "cake="+cake;

                }
                if(flower !== undefined && cake === undefined){
                    data = "flower="+flower;
                    ;
                }
                if(flower !== undefined && cake !== undefined){

                    data = "cake="+cake+"&flower="+flower;
                }


                //alert(data);

                $.ajax({
                    url: "getTotal.php",
                    type: 'GET',
                    data: data,
                    beforeSend: function() {

                    },
                    success: function(data, textStatus, xhr) {
                          $('#result').html(data);
                    },
                    error: function(xhr, textStatus, errorThrown) {

                    }
                });

            }

    </script>
<body>

<label for="c1">Cake1</label>
<input type="radio" id= "c1" class="cake" name="cake" value="50" onclick="getTotal();" />  
<label for="c2">Cake2</label>
<input type="radio" id= "c2" class="cake" name="cake" value="100" onclick="getTotal();" />
<label for="f1">Flower1</label>
<input type="radio" id= "f1" class="flower" name="flower" value="50" onclick="getTotal();" /> 
<label for="f2">Flower2</label>
<input type="radio" id= "f2" class="flower" name="flower" value="100" onclick="getTotal();" />

<div id="result"></div>

</body>
</html>

getTotal.php：

<?php

$total1 = 0;
$total2 = 0;
$cakeBase= 200;
$flowerBase = 100;

if(isset($_GET["cake"])){
    $cake = $_GET["cake"];
    //echo "cake" .$cake;

    $total1 = $cakeBase + $cake;
}
if(isset($_GET["flower"])){
    $flower = $_GET["flower"];
    //echo "flower". $flower;

    $total2 = $flowerBase + $flower;
}

echo $total1 + $total2;

?>

获取级联单选按钮值的值

2 个答案: