[英]How do I reset my radio button values when “clear form” is clicked?
當我點擊“清除表單”時，“總計”將更新為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>
鑒於無線電元素已正確取消選中（ 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;
}
嘗試這個：
var myRadioList = document.getElementsByTagName("input");
for (i = 0; i < myRadioList.length; i++)
{
if (myRadioList[i].type == "radio")
{
myRadioList[i].checked = false;
}
}
使用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;
如何讓我的按鈕清除前兩個表單然后再次單擊清除最后一個表單？
[英]How do I make my button clear the first two forms then when clicked again clear the last form?
當我選擇不同的值時，如何使我的單選按鈕再次變得清晰？
[英]how do I make my radio button become clear again when I pick a different value?
如果我單擊重置按鈕以不同形式重置單選按鈕，如何清除表數據
[英]how can i clear may table data if i click my reset button which resets my radio buttons on different forms
更改單選按鈕時如何計算價格折扣並清除表格
[英]How to calculate discount for price and clear form when radio button is changed
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.