单击“清除表单”时，如何重置单选按钮的值？
[英]How do I reset my radio button values when “clear form” is clicked?
问题描述
When I hit "clear form" the Total updates to 0.00 but the each radio button value is not reset to 0.00 within the form. 
当我点击“清除表单”时，“总计”将更新为0.00，但是表单中的每个单选按钮值都不会重置为0.00。 Everything looks like it cleared but the added values are still with in the form. 一切看起来都清除了，但附加值仍保留在表格中。 Is there a way to reset all radio button values to 0.00 when I click clear form? 单击清除表单时，是否可以将所有单选按钮值重置为0.00？ Right now they only clear when I refresh the page. 现在，它们仅在我刷新页面时清除。
<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>
3 个解决方案
解决方案1
1 2013-12-06 16:56:49
Given that the radio elements are correctly unchecked ( http://jsfiddle.net/4h84V/ ), I assume that you are talking about that the values in the prices variable are not reset. 鉴于无线电元素已正确取消选中（ http://jsfiddle.net/4h84V/ ），我假设您正在谈论的是prices变量中的值未重置。 You can achieve that easily by assigning an empty object to it, inside clearForm : 您可以通过在clearForm内部为它分配一个空对象来轻松实现该目标：
function clearForm() {
// ... other code
prices = {}; // "reset" `prices` to an empty object
}
Further notes: 进一步说明：
Instead of using your own reset logic, you might be better off using a reset button: 与其使用自己的重置逻辑，不如使用重置按钮，可能会更好：
<input type="reset" value="Clear Form" />
It will automatically reset the values of all form control elements to their default value. 它将自动将所有表单控件元素的值重置为其默认值。
However, if you want to reset radio buttons programmatically, the best approach is to access their defaultChecked property: 但是，如果要以编程方式重置单选按钮，最好的方法是访问其defaultChecked属性：
The default state of a radio button or checkbox as originally specified in HTML that created this object.
With this property you can truly reset a radio button. 使用此属性，您可以真正重置单选按钮。
Example: 例：
var radios = document.querySelectorAll('input[type="radio"]');
for (var i = 0, l = radios.length; i < l; i++) {
radios[i].checked = radios[i].defaultChecked;
}
解决方案2
0 2013-12-06 16:48:11
Try this: 尝试这个：
var myRadioList = document.getElementsByTagName("input");
for (i = 0; i < myRadioList.length; i++)
{
if (myRadioList[i].type == "radio")
{
myRadioList[i].checked = false;
}
}
解决方案3
-1 2013-12-06 16:49:09
With jQuery it is as simple as: 使用jQuery，它非常简单：
$('input[name=montior]').attr('checked',false);
or in pure Javascript: 或使用纯Javascript：
var ele = document.getElementsByName("monitor");
for(var i=0;i<ele.length;i++)
ele[i].checked = false;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.