Question

我正在尝试使用蝙蝠手机，高斯猪和光周期的单选按钮来计算成本。其他计算适用于其他变量但不适用于radCar。

    <!DOCTYPE html>
    <html lang="en">
    <head>
<meta charset="utf-8">
<title>Cars4You Car Rentals</title>
<link rel="stylesheet" type="text/css" href="mystylesheet.css">
    <script type="text/javascript">
function calculateCost()
{
var cost = 0
var radCar;
var chkGPS = 0
var rentalDay = parseInt(document.rentalForm.rentalDay.value);
var insurance = 0

radCar = document.rentalForm.radCar.value

    if (radCar=="batmobile")
{
cost = 100
}
if (radCar=="gausshog")
{
cost = 85
}
if (radCar=="lightcycle")
{
    cost = 40
} 

if ( document.rentalForm.chkGPS.checked )
{
    chkGPS = chkGPS+5;
}

if ( document.rentalForm.insurance.value=="Yes" )
{
insurance = insurance+20;
}

if (document.rentalForm.rentalDay.value>=7)
{
cost = cost-10;
}

finalPrice = (cost + chkGPS)*rentalDay + insurance;
alert("Your rental cost is $" + finalPrice);
}
    </script>
    </head>
    <body>
<div id="header">
    <h1>Cars4You Car Rentals</h1>
    <a href="home.html" target="_blank">Home</a>
    <----------------------------------------------------->
    <a href="contact.html" target="_blank">Contact</a>  
</div>
<div id="main_content">
    <form name=rentalForm>
First Name: 
    <input type="text" name="txtFirstName"> <br>
Last Name: 
    <input type="text" name="txtLastName"> <br>
    <h2>Vehicle Type</h2>
Batmobile ($100/day) : 
    <input type="radio" name="radCar" value="batmobile"> <br>
Gausshog ($85/day) : 
    <input type="radio" name="radCar" value="gausshog"> <br>
Lightcycle ($40/day) : 
    <input type="radio" name="radCar" value="lightcycle"> <br><br>
How many rental days?
    <select name="rentalDay">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option> <br>
    </select> <br>
*$10 discount for 7 or more days <br>
    <h2>Extras</h2>
Insurance ($20)?
    <select name="insurance">
        <option value="Yes">Yes</option>
        <option value="No">No</option>
    </select> <br>
GPS: 
    <input type="checkbox" name="chkGPS"> <br>
Special Requests: <br>
    <textarea style="width:200px" name="txtarRequests" rows=5></textarea> <br>
    <input type="button" name="btnsubmit" value="Book My Rental!" onclick="calculateCost()">
    </div>
    </form>
    </body>
    </html>

Answer 1

您需要一个函数来从一组无线电中获取已检查无线电的值。

替换

radCar = document.rentalForm.radCar.value

带

radCar = getRadio('radCar');

其中参数，在这种情况下radCar是广播的名称，即<input type="radio" name="radCar"

这是功能

function getRadio(name) {
    var radios = document.getElementsByName(name);
    for (var i = 0; i < radios.length; i++) {       
        if (radios[i].checked) return radios[i].value;
    }
}

工作示例http://jsfiddle.net/VX9Ge/

旁白：我觉得开关比if / elseif / else丛林要干净得多。

switch (radCar){
    case "batmobile":
        cost=100;
        break;
    case "gausshog":
        cost=85;
        break;
    case "lightcycle":
        cost=40;
        break;
    default: // none selected
        cost=0;
}

Answer 2

使用现代方法的简单示例

HTML

<form id="pickCar">
    <fieldset>
        <label for="radCar">Rad Cars:
            <input type="radio" name="radCar" value="batmobile">Batmobile</input>
            <input type="radio" name="radCar" value="gausshog">Gausshog</input>
            <input type="radio" name="radCar" value="lightcycle">Lightcycle</input>
        </label>
    </fieldset>
    <input type="submit" value="Submit"></input>
</form>

的Javascript

document.getElementById('pickCar').addEventListener('submit', function (evt) {
    evt.preventDefault();

    var radCars = evt.target.firstElementChild.firstElementChild.children,
        value;

    Array.prototype.some.call(radCars, function (radCar) {
        if (radCar.checked) {
            value = radCar.value;
        }

        return radCar.checked;
    });

    alert(value);
}, false);

在jsFiddle

上

单选按钮值在计算中不起作用

2 个答案: