javascript 在javascript中使用带有单选按钮的if else语句
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18016731/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using if else statement with radio buttons in javascript
提问by SS SS
I am trying to use an if else statement to do a certain action if one radio button is selected and do a different action if another is selected. In this case I want to use one formula if the basic button is selected and the pro formula if the pro button is selected. I am new to programming so apologies in advanced.
如果选择了一个单选按钮，我正在尝试使用 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>
回答by Arun P Johny
Looks like your javascript is missing a }
看起来您的 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>
Demo: Fiddle
演示：小提琴
回答by MonkeyZeus
Inside of your function packageTotal() you will also want to write:
在您的函数 packageTotal() 中，您还需要编写：
//stop the form from submitting
//place this wherever you need it in your logic
return false;
I also think you are interested in adding onChange() to the radio buttons instead of the onSubmit method:
我还认为您有兴趣将 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
回答by Mohammad Masoudian
<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>
