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

【问题标题】：Using if else statement with radio buttons in javascript在javascript中使用带有单选按钮的if else语句
【发布时间】：2013-08-03 17:08:56
【问题描述】：

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

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

【问题讨论】：

有一些错别字.. 我修正了。这是fiddle。
非常感谢！问题已解决！

标签： javascript if-statement radio-button

【解决方案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

【讨论】：

为什么返回 false ？那是按钮
@MohammadMasoudian 错过了

【解决方案2】：

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

【讨论】：

【解决方案3】：

在您的函数 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

【讨论】：