Question

嘿大家我是html和javascript编程的新手。我的代码验证了一组单选按钮，而不是所有3.这就是第一个问题。第二个是我需要在选择选项时在“总系统框”中显示总数。

这是我的代码（我为缩进道歉）

<head>
<title>Unit 2 Summary</title>
<link href="unit2-summary.css" rel="stylesheet" type="text/css"></link>
<script>
function doClear()
{
document.computer.name.value = "";
document.computer.address.value = "";
document.computer.address2.value = "";
document.computer.city.value = "";
document.computer.state.value = "";
document.computer.zip.value = "";
document.computer.phone.value = "";
document.computer.email.value = "";

document.computer.cases[0].checked = false;
document.computer.cases[1].checked = false;
document.computer.cases[2].checked = false;

document.computer.monitor[0].checked = false;
document.computer.monitor[1].checked = false;
document.computer.monitor[2].checked = false;

document.computer.printer[0].checked = false;
document.computer.printer[1].checked = false;
document.computer.printer[2].checked = false;   
return;
}

function doSubmit()
{
if (validateText() == false)
 {
    alert("Missing Fields Required")
    return;
}
if (validateRadio() == false)
{ 
    alert("Please select options")
    return;
}
alert("Your computer order has been submitted.");
return;
}
function validateText()
{
var name = document.computer.name.value;
if (name.length == 0) return false;
var address = document.computer.address.value;
if (address.length == 0) return false;
var city = document.computer.city.value;
if (city.length == 0) return false;
var state = document.computer.state.value;
if (state.length == 0) return false;
var zip = document.computer.zip.value;
if (zip.length == 0) return false;
var phone = document.computer.phone.value;
if (phone.length == 0) return false;
var email = document.computer.email.value;
if (email.length == 0) return false;
return true;
}

function validateRadio()
{
if (document.computer.cases[0].checked) return true;
if (document.computer.cases[1].checked) return true;
if (document.computer.cases[2].checked) return true;    
return false;
}
function validateRadio()
{
if (document.computer.monitor[0].checked) return true;
if (document.computer.monitor[1].checked) return true;
if (document.computer.monitor[2].checked) return true;  
return false;
}
function validateRadio()
{
if (document.computer.printer[0].checked) return true;
if (document.computer.printer[1].checked) return true;
if (document.computer.printer[2].checked) return true;  
return false;
}

</script>

</head>

<body>
<h3><center>Computer System Order Form</center></h3>

<form name="computer">
<table border="5" cellpadding="10" align="center">
<tr>
<td width="320">
<p style="font-size:12">
<img src="case.png" align="right" height="125" width="125" /><br>
<b>Computer Case Style:</b><br>


    <input name="cases" type="radio" value="500.00">Desktop Case ($500.00)<br>

    <input name="cases" type="radio" value="600.00">Mini-Tower Case ($600.00)<br>

    <input name="cases" type="radio" value="700.00">Full Tower Case ($700.00)<br>

</td>
<td>Total System Price:&nbsp;&nbsp;&nbsp;$
<input type="text" name="total" readonly value="0.00" size="8">
</td>
</tr>

<tr>
<td>
<p style="font-size:12">
<img src="monitor.png" align="right" height="125" width="125" /><br>
<b>Computer Monitor:</b><br>   
    <input name="monitor" type="radio" value="250.00">17" LCD Flat Screen ($250.00)<br>
    <input name="monitor" type="radio" value="300.00">19" LCD Flat Screen ($300.00)<br>
    <input name="monitor" type="radio" value="350.00">21" LCD Flat Screen ($350.00)<br>
</td>
<td>
<p style="font-size:12">
Full Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="name"     size="25" type="text"><p>
<p style="font-size:12">
Street Address:&nbsp;&nbsp;<input name="address" size="25" type="text"><br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="address2" size="25" type="text"><br></p>
<p style="font-size:12">
City, State, Zip:&nbsp;
<input name="city" size="20" type="text">
<input name="state" size="2" type="text">
<input name="zip" size="5" type="text"><p>
<p style="font-size:12">
Phone Number:&nbsp;&nbsp;<input name="phone" size="25" type="text"></p>
<p style="font-size:12">
Email Address:&nbsp;&nbsp;<input name="email" size="25" type="text">
</p>
</td>
</tr>
<tr>
<td>
<p style="font-size:12">
<img src="printer.png" align="right" height="125" width="125" /><br>
<b>Computer Printer:</b><br>
    <input name="printer" type="radio" value="100.00">Inkjet Printer ($100.00)<br>
    <input name="printer" type="radio" value="250.00">Laser Printer ($250.00)<br>
    <input name="printer" type="radio" value="350.00">Color Laser Printer ($350.00)<br>
</td>
<td>
<center>
<input type="button" value="Submit Order" onClick="doSubmit()">
<input type="button" value="Clear Values" onClick="doClear()">
</td>
</tr>
</table>
</form>
</body>
</html>

Answer 1

您可以在输入元素中添加checked属性以使其默认选中，这将导致用户检查一个单选按钮

ex：<input name="printer" type="radio" value="100.00" checked />

您可以使用以下javascript代码计算总和

function calculate()
{
   var sum = 0;
   var radio = document.getElementsByTagName('input')
   for(var i=0;i<radio.length;i++)
   {
      if(radio[i].getAttribute('type').toLowerCase() == 'radio')
      {
         if(radio[i].checked)
         {
            sum += radio[i].value;
         }
      }
   }
   // change the attribute id="total" in which you want to show total
   document.getElementById('total').value = sum;
 }

需要验证多个单选按钮并在选择选项时更新总计

1 个答案: