在警报框中显示复选框值答案

【问题标题】：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: &nbsp;&nbsp;&nbsp;<input name="customer" size="50" type="text"><br>
Address: <input name="address" size"50" type="text"><br>
City: &nbsp;&nbsp;&nbsp;<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: &nbsp;&nbsp;<input name="phone" size="50" type="text"><br>
Email: &nbsp;&nbsp;<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()它或其他东西。要么，要么你可以连接一个字符串。您的选择。

标签： javascript jquery html validation checkbox

【解决方案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: &nbsp;&nbsp;&nbsp;<input name="customer" size="50" type="text"><br>
Address: <input name="address" size"50" type="text"><br>
City: &nbsp;&nbsp;&nbsp;<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: &nbsp;&nbsp;<input name="phone" size="50" type="text"><br>
Email: &nbsp;&nbsp;<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: &nbsp;&nbsp;&nbsp;<input name="customer" size="50" type="text"><br>
Address: <input name="address" size"50" type="text"><br>
City: &nbsp;&nbsp;&nbsp;<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: &nbsp;&nbsp;<input name="phone" size="50" type="text"><br>
Email: &nbsp;&nbsp;<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，我有一个更新这个程序。有空的时候可以看看吗？问题的链接是stackoverflow.com/questions/30582328/…，名称也是“使用 JS 显示下拉列表并将名称和城市值在新窗口中转换为大写”