当我点击“清除表格”时，总计更新为0.00，但每个单选按钮值不会在表单中重置为0.00。一切看起来都已清除，但增加的值仍然在表单中。当我点击清除表格时，有没有办法将所有单选按钮值重置为0.00？现在他们只在我刷新页面时清除。
<script type="text/javascript">
var prices = new Object();
function updateTotal () {
var total = 0.00;
for (var price in prices) {
total += parseInt(prices[price]);
}
document.getElementById("total").value = total; // Add the id "total" to the input field
}
function doClear()
{
document.CustomerForm.customer.value = "";
document.CustomerForm.address.value = "";
document.CustomerForm.city.value = "";
document.CustomerForm.state.options.selectedIndex = "PA";
document.CustomerForm.zip.value = "";
document.CustomerForm.phone.value = "";
document.CustomerForm.email.value = "";
document.CustomerForm.total.value = 0.00;
document.OrderForm.tower[0].checked = false;
document.OrderForm.tower[1].checked = false;
document.OrderForm.tower[2].checked = false;
document.OrderForm.monitor[0].checked = false;
document.OrderForm.monitor[1].checked = false;
document.OrderForm.monitor[2].checked = false;
document.OrderForm.printer[0].checked = false;
document.OrderForm.printer[1].checked = false;
document.OrderForm.printer[2].checked = false;
return;
}
</script>
<body onLoad = "startup()" >
<h1 align="center">Computer System Order Form</h1>
<!- TODO: implement the order form here-->
<table border="black" cellpadding="15px" align="center">
<tr>
<td>
<table cellpadding="15px">
<form name="OrderForm">
<tr>
<td>
<h4>Computer Case Style:</h4>
<p>
<input type="radio" name="tower" value="500.00" onChange="javascript:prices['tower'] = this.value; updateTotal();" onClick="changeBackground1(this.value);" id="case1" /><label for="case1">Desktop Case ($500.00)</label></br>
<input type="radio" name="tower" value="600.00" onChange="javascript:prices['tower'] = this.value; updateTotal();" onClick="changeBackground1(this.value);" id="case2" /><label for="case2">Mini-Tower Case ($600.00)</label></br>
<input type="radio" name="tower" value="700.00" onChange="javascript:prices['tower'] = this.value; updateTotal();" onClick="changeBackground1(this.value);" id="case3" /><label for="case3">Full-Tower Case ($700.00)</label></br>
</p>
</td>
<td><img name="casepic" src="case500.jpg" width="125" height="125" id="casepicture"></td>
</tr>
<tr>
<td>
<h4>Computer Monitor:</h4>
<p>
<input type="radio" name="monitor" value="250.00" onChange="javascript:prices['monitor'] = this.value; updateTotal();" onClick="changeBackground2(this.value);" id="monitor1" /><label for="monitor1">17" LCD Flat Screen ($250.00)</label></br>
<input type="radio" name="monitor" value="300.00" onChange="javascript:prices['monitor'] = this.value; updateTotal();" onClick="changeBackground2(this.value);" id="monitor2" /><label for="monitor2">19" LCD Flat Screen ($300.00)</label></br>
<input type="radio" name="monitor" value="350.00" onChange="javascript:prices['monitor'] = this.value; updateTotal();" onClick="changeBackground2(this.value);" id="monitor3" /><label for="monitor3">21" LCD Flat Screen ($350.00)</label></br>
</p>
</td>
<td><img name="monitorpic" src="monitor250.jpg" width="125" height="125" id="monitorpicture"></td>
</tr>
<tr>
<td>
<h4>Computer Printer:</h4>
<p>
<input type="radio" name="printer" value="100.00" onChange="javascript:prices['printer'] = this.value; updateTotal();" onClick="changeBackground3(this.value);" id="printer1" /><label for="printer1">Inkjet Printer ($100.00)</label></br>
<input type="radio" name="printer" value="250.00" onChange="javascript:prices['printer'] = this.value; updateTotal();" onClick="changeBackground3(this.value);" id="printer2" /><label for="printer2">Laser Printer ($250.00)</label></br>
<input type="radio" name="printer" value="350.00" onChange="javascript:prices['printer'] = this.value; updateTotal();" onClick="changeBackground3(this.value);" id="printer3" /><label for="printer3">Color Laser Printer ($350.00)</label></br>
</p>
</td>
<td><img name="printpic" src="printer100.jpg" width="125" height="125" id="printerpicture"/></td>
</tr>
</form>
</table>
</td>
<td>
<table padding="10px">
<tr>
<form name="CustomerForm">
<td>Total System Price:</td>
<td>$<input type="text" name="total" readonly value="0.00" size="10" id="total"></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Full Name:</td>
<td><input type="text" name="customer" /></td>
</tr>
<tr>
<td>Street Address:</td>
<td><input type="text" name="address" /></td>
</tr>
<tr>
<td>City:</td> <br>
<td><input type="text" name="city" /></td>
</tr>
<tr>
<td>State:</td>
<td>
<select name="state"/>
<option value="PA">PA</option>
<option value="NY">NY</option>
<option value="NJ">NJ</option>
<option value="DE">DE</option>
<option value="FL">FL</option>
<option value="ME">ME</option>
<option value="CA">CA</option>
</select>
</td>
</tr>
<tr>
<td>Zip:</td>
<td><input type="text" name="zip" /></td>
</tr>
<tr>
<td>Phone Number:</td>
<td><input type="text" name="phone" /></td>
</tr>
<tr>
<td>Email Address:</td>
<td><input type="text" name="email"></td>
</tr>
</form>
<tr>
<td> </td>
</tr>
<tr>
<td><input type="button" value="Submit Order" onClick="doSubmit()" /></td>
<td><input type="button" value="Clear Form" onClick="doClear()" /></td>
</tr>
</table>
</td>
</tr>
</table>
答案 0 :(得分：1)
鉴于无线电元素未正确取消选中（http://jsfiddle.net/4h84V/），我假设您在谈论prices变量中的值未重置。您可以通过在clearForm：
function clearForm() {
// ... other code
prices = {}; // "reset" `prices` to an empty object
}
补充说明：
您可能最好使用重置按钮，而不是使用自己的重置逻辑：
<input type="reset" value="Clear Form" />
它会自动将所有表单控件元素的值重置为默认值。
但是，如果要以编程方式重置单选按钮，最好的方法是访问其defaultChecked属性：
最初在创建此对象的HTML中指定的单选按钮或复选框的默认状态。
使用此属性，您可以真正重置单选按钮。
示例：
var radios = document.querySelectorAll('input[type="radio"]');
for (var i = 0, l = radios.length; i < l; i++) {
radios[i].checked = radios[i].defaultChecked;
}
答案 1 :(得分：0)
试试这个：
var myRadioList = document.getElementsByTagName("input");
for (i = 0; i < myRadioList.length; i++)
{
if (myRadioList[i].type == "radio")
{
myRadioList[i].checked = false;
}
}
答案 2 :(得分：-1)
使用jQuery就像：
一样简单$('input[name=montior]').attr('checked',false);
或纯粹的Javascript：
var ele = document.getElementsByName("monitor");
for(var i=0;i<ele.length;i++)
ele[i].checked = false;