在警报框中显示复选框值
Posted
技术标签:
【中文标题】在警报框中显示复选框值【英文标题】：Show Checkbox Values In Alert Box 【发布时间】：2015-08-08 20:59:54 【问题描述】：我正在处理一项任务，但遇到了困难。
我正在尝试在提交后在警报框弹出屏幕中显示浇头的复选框值。文本框和单选值出现，但复选框返回空白值。
知道我做错了什么吗？
<html>
<head>
<title>HTML and javascript</title>
<script>
function doClear()
document.PizzaForm.customer.value ="";
document.PizzaForm.address.value = "";
document.PizzaForm.city.value = "";
document.PizzaForm.state.value="";
document.PizzaForm.zip.value="";
document.PizzaForm.phone.value="";
document.PizzaForm.email.value="";
document.PizzaForm.sizes[0].checked = false;
document.PizzaForm.sizes[1].checked = false;
document.PizzaForm.sizes[2].checked = false;
document.PizzaForm.sizes[3].checked = false;
document.PizzaForm.toppings[0].checked = false;
document.PizzaForm.toppings[1].checked = false;
document.PizzaForm.toppings[2].checked = false;
document.PizzaForm.toppings[3].checked = false;
document.PizzaForm.toppings[4].checked = false;
document.PizzaForm.toppings[5].checked = false;
document.PizzaForm.toppings[6].checked = false;
document.PizzaForm.toppings[7].checked = false;
document.PizzaForm.toppings[8].checked = false;
return;
function doSubmit()
if(validateText() == true);
if(validateRadio() == true);
if(validateCheck() == true);
alert("Name:" + " " + document.PizzaForm.customer.value +
'\n' +
"Address:" + " " + document.PizzaForm.address.value +
'\n' +
"City:" + " " + document.PizzaForm.city.value +
'\n' +
"State:" + " " + document.PizzaForm.state.value +
'\n' +
"Zip:" + " " + document.PizzaForm.zip.value +
'\n' +
"Phone:" + " " + document.PizzaForm.phone.value +
'\n' +
"Email:" + " " + document.PizzaForm.email.value +
'\n' +
"Size:" + " " + document.PizzaForm.sizes.value +
'\n' +
"Toppings:" + " " + document.PizzaForm.toppings.value);
return;
function validateText()
var customer = document.PizzaForm.customer.value;
if (customer.length == 0)
alert("Please enter your name.")
var address = document.PizzaForm.address.value;
if (address.length == 0)
alert("Please enter an address.")
var city = document.PizzaForm.city.value;
if (city.length == 0)
alert("Please enter a city.")
var state = document.PizzaForm.state.value;
if (state.length == 0)
alert("Please enter a state.")
var zip = document.PizzaForm.zip.value;
if (zip.length == 0)
alert("Please enter a zip code.")
var phone = document.PizzaForm.phone.value;
if (phone.length == 0)
alert("Please enter a phone number.")
var email = document.PizzaForm.email.value;
atpos = email.indexOf("@");
dotpos = email.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 ))
alert("Please enter an email address.")
return false;
return true;
function validateRadio()
if (document.PizzaForm.sizes[0].checked) return true;
if (document.PizzaForm.sizes[1].checked) return true;
if (document.PizzaForm.sizes[2].checked) return true;
if (document.PizzaForm.sizes[3].checked) return true;
if (document.PizzaForm.sizes.value == false);
alert("Please choose a pizza size.");
return;
function validateCheck()
if (document.PizzaForm.toppings[0].checked == false &&
document.PizzaForm.toppings[1].checked == false &&
document.PizzaForm.toppings[2].checked == false &&
document.PizzaForm.toppings[3].checked == false &&
document.PizzaForm.toppings[4].checked == false &&
document.PizzaForm.toppings[5].checked == false &&
document.PizzaForm.toppings[6].checked == false &&
document.PizzaForm.toppings[7].checked == false &&
document.PizzaForm.toppings[8].checked == false)
alert("Please pick a topping of your choice.");
return false;
return true;
</script>
</head>
<body>
<form name="PizzaForm">
<h1>The JavaScript Pizza Parlor</h1>
<p>
<h4>Step 1: Enter your name, address, and phone number:</h4>
<font face ="Courier New">
Name: <input name="customer" size="50" type="text"><br>
Address: <input name="address" size"50" type="text"><br>
City: <input name="city" size="15" type="text">
State: <input name="state" size="2" type="TEXT">
Zip: <input name="zip" size="5" type="text"><br>
Phone: <input name="phone" size="50" type="text"><br>
Email: <input name="email" size="40" type="text"><br>
</font>
</p>
<p>
<h4>Step 2: Select the size of pizza you want:</h4>
<font face="Courier New">
<input name="sizes" type="radio" value="Small">Small
<input name="sizes" type="radio" value="Medium">Medium
<input name="sizes" type="radio" value="Large">Large
<input name="sizes" type="radio" value="Jumbo">Jumbo<br>
</font>
</p>
<p>
<h4>Step 3: Select the pizza toppings you want:</h4>
<font face="Courier New">
<input name="toppings" type="checkbox" value="Pepperoni">Pepperoni
<input name="toppings" type="checkbox" value="Canadian Bacon">Canadian Bacon
<input name="toppings" type="checkbox" value="Sausage">Sausage<br>
<input name="toppings" type="checkbox" value="Mushrooms">Mushrooms
<input name="toppings" type="checkbox" value="Pineapple">Pineapple
<input name="toppings" type="checkbox" value="Black Olives">Black Olives<br>
<input name="toppings" type="checkbox" value="Green Peppers">Green Peppers
<input name="toppings" type="checkbox" value="Extra Cheese">Extra Cheese
<input name="toppings" type="checkbox" value="None">None<br>
</font>
</p>
<input type="button" value="Submit Order" onClick="doSubmit()">
<input type="button" value="Clear Entries" onClick="doClear()">
</form>
</body>
</html>【问题讨论】：
你有太多不必要的代码和 if 条件。我建议您考虑使用类名和 for 循环。你会发现你的 90% 的 javascript 都放在了一个 if 条件中。CheckboxElement.checked 测试复选框的布尔值。显然，CheckboxElement.value 是复选框的值。使用条件和循环。 if(CheckboxElement.checked)someArray.push(CheckboxElement.value)。当然，您需要定义 someArray。然后你可以稍后.join()它或其他东西。要么，要么你可以连接一个字符串。您的选择。
【参考方案1】：
简单的 for 循环可以节省您的时间。
<html>
<head>
<title>HTML and JavaScript</title>
<script>
function doClear()
document.PizzaForm.customer.value ="";
document.PizzaForm.address.value = "";
document.PizzaForm.city.value = "";
document.PizzaForm.state.value="";
document.PizzaForm.zip.value="";
document.PizzaForm.phone.value="";
document.PizzaForm.email.value="";
document.PizzaForm.sizes[0].checked = false;
document.PizzaForm.sizes[1].checked = false;
document.PizzaForm.sizes[2].checked = false;
document.PizzaForm.sizes[3].checked = false;
document.PizzaForm.toppings[0].checked = false;
document.PizzaForm.toppings[1].checked = false;
document.PizzaForm.toppings[2].checked = false;
document.PizzaForm.toppings[3].checked = false;
document.PizzaForm.toppings[4].checked = false;
document.PizzaForm.toppings[5].checked = false;
document.PizzaForm.toppings[6].checked = false;
document.PizzaForm.toppings[7].checked = false;
document.PizzaForm.toppings[8].checked = false;
return;
function doSubmit()
if(validateText() == true);
if(validateRadio() == true);
if(validateCheck() == true);
var toppings = "";
for(i=0;i<document.PizzaForm.toppings.length;i++)
if(document.PizzaForm.toppings[i].checked)
toppings += (i==0?"":",")+document.PizzaForm.toppings[i].value;
alert("Name:" + " " + document.PizzaForm.customer.value +
'\n' +
"Address:" + " " + document.PizzaForm.address.value +
'\n' +
"City:" + " " + document.PizzaForm.city.value +
'\n' +
"State:" + " " + document.PizzaForm.state.value +
'\n' +
"Zip:" + " " + document.PizzaForm.zip.value +
'\n' +
"Phone:" + " " + document.PizzaForm.phone.value +
'\n' +
"Email:" + " " + document.PizzaForm.email.value +
'\n' +
"Size:" + " " + document.PizzaForm.sizes.value +
'\n' +
"Toppings:" + " " + toppings);
return;
function validateText()
var customer = document.PizzaForm.customer.value;
if (customer.length == 0)
alert("Please enter your name.")
var address = document.PizzaForm.address.value;
if (address.length == 0)
alert("Please enter an address.")
var city = document.PizzaForm.city.value;
if (city.length == 0)
alert("Please enter a city.")
var state = document.PizzaForm.state.value;
if (state.length == 0)
alert("Please enter a state.")
var zip = document.PizzaForm.zip.value;
if (zip.length == 0)
alert("Please enter a zip code.")
var phone = document.PizzaForm.phone.value;
if (phone.length == 0)
alert("Please enter a phone number.")
var email = document.PizzaForm.email.value;
atpos = email.indexOf("@");
dotpos = email.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 ))
alert("Please enter an email address.")
return false;
return true;
function validateRadio()
if (document.PizzaForm.sizes[0].checked) return true;
if (document.PizzaForm.sizes[1].checked) return true;
if (document.PizzaForm.sizes[2].checked) return true;
if (document.PizzaForm.sizes[3].checked) return true;
if (document.PizzaForm.sizes.value == false);
alert("Please choose a pizza size.");
return;
function validateCheck()
if (document.PizzaForm.toppings[0].checked == false &&
document.PizzaForm.toppings[1].checked == false &&
document.PizzaForm.toppings[2].checked == false &&
document.PizzaForm.toppings[3].checked == false &&
document.PizzaForm.toppings[4].checked == false &&
document.PizzaForm.toppings[5].checked == false &&
document.PizzaForm.toppings[6].checked == false &&
document.PizzaForm.toppings[7].checked == false &&
document.PizzaForm.toppings[8].checked == false)
alert("Please pick a topping of your choice.");
return false;
return true;
</script>
</head>
<body>
<form name="PizzaForm">
<h1>The JavaScript Pizza Parlor</h1>
<p>
<h4>Step 1: Enter your name, address, and phone number:</h4>
<font face ="Courier New">
Name: <input name="customer" size="50" type="text"><br>
Address: <input name="address" size"50" type="text"><br>
City: <input name="city" size="15" type="text">
State: <input name="state" size="2" type="TEXT">
Zip: <input name="zip" size="5" type="text"><br>
Phone: <input name="phone" size="50" type="text"><br>
Email: <input name="email" size="40" type="text"><br>
</font>
</p>
<p>
<h4>Step 2: Select the size of pizza you want:</h4>
<font face="Courier New">
<input name="sizes" type="radio" value="Small">Small
<input name="sizes" type="radio" value="Medium">Medium
<input name="sizes" type="radio" value="Large">Large
<input name="sizes" type="radio" value="Jumbo">Jumbo<br>
</font>
</p>
<p>
<h4>Step 3: Select the pizza toppings you want:</h4>
<font face="Courier New">
<input name="toppings" type="checkbox" value="Pepperoni">Pepperoni
<input name="toppings" type="checkbox" value="Canadian Bacon">Canadian Bacon
<input name="toppings" type="checkbox" value="Sausage">Sausage<br>
<input name="toppings" type="checkbox" value="Mushrooms">Mushrooms
<input name="toppings" type="checkbox" value="Pineapple">Pineapple
<input name="toppings" type="checkbox" value="Black Olives">Black Olives<br>
<input name="toppings" type="checkbox" value="Green Peppers">Green Peppers
<input name="toppings" type="checkbox" value="Extra Cheese">Extra Cheese
<input name="toppings" type="checkbox" value="None">None<br>
</font>
</p>
<input type="button" value="Submit Order" onClick="doSubmit()">
<input type="button" value="Clear Entries" onClick="doClear()">
</form>
</body>
</html>
doClear() 函数实际上是不必要的，因为您可以将“清除条目”按钮设置为 type="reset" 来执行相同的操作。
另外，在你熟悉了 for 循环之后，你可以将你的代码细化如下：
<html>
<head>
<title>HTML and JavaScript</title>
<script>
function doSubmit()
// validate the fields
if( ! (validateText() && validateRadio() && validateCheck()) ) return false;
// generate the box message
var fields=["customer", "address", "city", "state", "zip", "phone", "email","sizes"];
var fieldNames=["Name", "Address", "City", "State", "Zip", "Phone", "Email","Size"];
var msg = "";
for(i=0;i<fields.length;i++)
msg += fieldNames[i] + ": " + document.PizzaForm[ fields[i] ].value + "\n";
msg += "Toppings: ";
for(i=0;i<document.PizzaForm.toppings.length;i++)
if(document.PizzaForm.toppings[i].checked)
msg += (i==0?"":",")+document.PizzaForm.toppings[i].value;
alert(msg);
return true;
function validateText()
var pass=true;
var fields=["customer", "address", "city", "state", "zip", "phone"];
var fieldNames=["your name", "an address", "a city", "a state", "a zip code", "a phone number"];
for(i=0;i<fields.length;i++)
if(document.PizzaForm[ fields[i] ].value.length == 0)
alert("Please enter " + fieldNames[i] + ".");
pass=false;
var email = document.PizzaForm["email"].value;
atpos = email.indexOf("@"); dotpos = email.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 ))alert("Please enter an email address.");pass=false;
return pass;
function validateRadio()
for(i=0;i<document.PizzaForm.sizes.length;i++)
if(document.PizzaForm.sizes[i].checked)
return true;
alert("Please choose a pizza size.");
return false;
function validateCheck()
for(i=0;i<document.PizzaForm.toppings.length;i++)
if(document.PizzaForm.toppings[i].checked)
return true;
alert("Please pick a topping of your choice.");
return false;
</script>
</head>
<body>
<form name="PizzaForm">
<h1>The JavaScript Pizza Parlor</h1>
<p>
<h4>Step 1: Enter your name, address, and phone number:</h4>
<font face ="Courier New">
Name: <input name="customer" size="50" type="text"><br>
Address: <input name="address" size"50" type="text"><br>
City: <input name="city" size="15" type="text">
State: <input name="state" size="2" type="TEXT">
Zip: <input name="zip" size="5" type="text"><br>
Phone: <input name="phone" size="50" type="text"><br>
Email: <input name="email" size="40" type="text"><br>
</font>
</p>
<p>
<h4>Step 2: Select the size of pizza you want:</h4>
<font face="Courier New">
<input name="sizes" type="radio" value="Small">Small
<input name="sizes" type="radio" value="Medium">Medium
<input name="sizes" type="radio" value="Large">Large
<input name="sizes" type="radio" value="Jumbo">Jumbo<br>
</font>
</p>
<p>
<h4>Step 3: Select the pizza toppings you want:</h4>
<font face="Courier New">
<input name="toppings" type="checkbox" value="Pepperoni">Pepperoni
<input name="toppings" type="checkbox" value="Canadian Bacon">Canadian Bacon
<input name="toppings" type="checkbox" value="Sausage">Sausage<br>
<input name="toppings" type="checkbox" value="Mushrooms">Mushrooms
<input name="toppings" type="checkbox" value="Pineapple">Pineapple
<input name="toppings" type="checkbox" value="Black Olives">Black Olives<br>
<input name="toppings" type="checkbox" value="Green Peppers">Green Peppers
<input name="toppings" type="checkbox" value="Extra Cheese">Extra Cheese
<input name="toppings" type="checkbox" value="None">None<br>
</font>
</p>
<input type="button" value="Submit Order" onClick="doSubmit()">
<input type="reset" value="Clear Entries">
</form>
</body>
</html>
【讨论】：
感谢您的帮助！有什么好的资源可以让我了解更多关于 for 循环的信息吗？我真的很想更好地了解它们的工作原理。 有很多网站为初学者教授 for 循环。这是 W3schools 的 for-loop 教程的一个链接：w3schools.com/js/js_loop_for.asp 我已经添加了一个使用 for-loop 的改进版本，虽然它可能不是很优雅，作为对你的建议。 哇！这确实是一些高级的东西。如果我想能够进行这种编码，我还有很多工作要做。再次感谢您！ Hi Ting Yi Shih，我有一个更新这个程序。有空的时候可以看看吗？问题的链接是***.com/questions/30582328/…，名称也是“使用 JS 显示下拉列表并将名称和城市值在新窗口中转换为大写”以上是关于在警报框中显示复选框值的主要内容，如果未能解决你的问题，请参考以下文章
根据在选择/下拉框中而不是复选框中选择的值动态获取和显示地图图层