将if-else语句与javascript中的单选按钮一起使用

Using if else statement with radio buttons in javascript

本文关键字：单选按钮 一起 if-else 语句 javascript      更新时间：2023-09-26

如果选择了一个单选按钮，我将尝试使用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>

看起来您的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

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

在函数包Total（）内部，您还需要编写：

//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
相关文章：