Question

如果选择了一个单选按钮，我尝试使用if else语句执行某个操作，如果选择了另一个单选按钮，则执行不同的操作。在这种情况下，如果选择了基本按钮，我想使用一个公式，如果选择了pro按钮，我想使用专业公式。我是编程的新手，所以在高级时道歉。

<html>

<head>

<title>Calculator</title>

<script language="javascript" type="text/javascript">
function packageTotal(){
    //Enter in prices here
    var x = 5;
    var y = 10;
    var p = x + y*12;
    var b = y * 12;

    if(document.calculator.getElementById('basicProgram').checked) {
        //Basic package is checked
        document.calculator.total.value=b;


    }else if(document.calculator.getElementById('proProgram').checked) {
        //Pro package is checked
        document.calculator.total.value=p;

    } 

</head>

<body>

<!-- Opening a HTML Form. --> 
<form name="calculator">

<!-- User fills out form here -->

<br />
<input type="radio" name="programType" id="basicProgram" value="Basic" /> Basic
<input type="radio" name="programType" id="proProgram" value="Pro" checked /> Pro

<!-- Here result will be displayed. -->

<br />
Your total price is: <input type="text" name="total">


<input type="button" value="Submit" onclick="javascript:packageTotal();">


</form>

</body>
</html>

Answer 1

您的javascript似乎缺少}

<html>

<head>
<title>Calculator</title>

<script language="javascript" type="text/javascript">
function packageTotal() {
    // Enter in prices here
    var x = 5;
    var y = 10;
    var p = x + y * 12;
    var b = y * 12;

    if (document.getElementById('basicProgram').checked) {
        // Basic package is checked
        document.calculator.total.value = b;

    } else if (document.getElementById('proProgram').checked) {
        // Pro package is checked
        document.calculator.total.value = p;

    }
}
</script>
</head>

<body>

<!-- Opening a HTML Form. --> 
<form name="calculator">

<!-- User fills out form here -->

<br />
<input type="radio" name="programType" id="basicProgram" value="Basic" /> Basic
<input type="radio" name="programType" id="proProgram" value="Pro" checked /> Pro

<!-- Here result will be displayed. -->

<br />
Your total price is: <input type="text" name="total">


<input type="button" value="Submit" onclick="javascript:packageTotal();">


</form>

</body>
</html>

演示：Fiddle

Answer 2

在你的函数packageTotal（）里面你也想写：

//stop the form from submitting
//place this wherever you need it in your logic
return false;

我也认为你有兴趣将onChange（）添加到单选按钮而不是onSubmit方法：

<input type="radio" name="programType" id="basicProgram" value="Basic" onChange="packageTotal()" /> Basic
<input type="radio" name="programType" id="proProgram" value="Pro" checked onChange="packageTotal()" /> Pro

Answer 3

<html>

<head>

<title>Calculator</title>

<script language="javascript" type="text/javascript">
function packageTotal(){
    //Enter in prices here
    var x = 5;
    var y = 10;
    var p = x + y*12;
    var b = y * 12;

    if(document.getElementById('basicProgram').checked) {
        //Basic package is checked
        document.calculator.total.value=b;


    }else if(document.getElementById('proProgram').checked) {
        //Pro package is checked
        document.calculator.total.value=p;

    } 
}
</head>

<body>

<!-- Opening a HTML Form. --> 
<form name="calculator">

<!-- User fills out form here -->

<br />
<input type="radio" name="programType" id="basicProgram" value="Basic" /> Basic
<input type="radio" name="programType" id="proProgram" value="Pro" checked /> Pro

<!-- Here result will be displayed. -->

<br />
Your total price is: <input type="text" name="total">


<input type="button" value="Submit" onclick="javascript:packageTotal();">


</form>

</body>
</html>

在javascript中使用带有单选按钮的if else语句

3 个答案: