Fatal编程技术网
  • javascript/
  • Javascript 在警报框中显示复选框值

Javascript 在警报框中显示复选框值

javascript jquery html validation checkbox

Javascript 在警报框中显示复选框值,javascript,jquery,html,validation,checkbox,Javascript,Jquery,Html,Validation,Checkbox,我正在做作业，遇到了麻烦 我正在尝试在提交后在警报框弹出屏幕中显示浇头的复选框值。将显示文本框和单选值，但复选框返回空白值 知道我做错了什么吗 HTML和JavaScript 函数doClear（） { document.PizzaForm.customer.value=“”； document.PizzaForm.address.value=“”； document.PizzaForm.city.value=“”； document.PizzaForm.state.value=“”； do

我正在做作业，遇到了麻烦

我正在尝试在提交后在警报框弹出屏幕中显示浇头的复选框值。将显示文本框和单选值，但复选框返回空白值

知道我做错了什么吗


HTML和JavaScript
函数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.size[0]。选中=false；
document.PizzaForm.size[1]。选中=false；
document.PizzaForm.size[2]。选中=false；
document.PizzaForm.size[3]。选中=false；
document.PizzaForm.toppings[0]。选中=false；
document.PizzaForm.toppings[1]。选中=false；
document.PizzaForm.toppings[2]。选中=false；
document.PizzaForm.toppings[3]。选中=false；
document.PizzaForm.toppings[4]。选中=false；
document.PizzaForm.toppings[5]。选中=false；
document.PizzaForm.toppings[6]。选中=false；
document.PizzaForm.toppings[7]。选中=false；
document.PizzaForm.toppings[8]。选中=false；
返回；
}
函数doSubmit（）
{
如果（validateText（）==true）；
if（validateRadio（）==true）；
如果（validateCheck（）==true）；
警报（“名称：“+”+document.PizzaForm.customer.value+
'\n'+
“地址：”+“+document.PizzaForm.Address.value+
“\n”+
城市：“+”+document.PizzaForm.City.value+
“\n”+
状态：“+”+document.PizzaForm.State.value+
“\n”+
“Zip:”+“”+document.PizzaForm.Zip.value+
“\n”+
电话：“+”+document.PizzaForm.Phone.value+
“\n”+
电子邮件：“+”+document.PizzaForm.Email.value+
“\n”+
“大小：”+“”+document.PizzaForm.Size.value+
“\n”+
“Toppings:”+“+document.PizzaForm.Toppings.value）；
返回；
}
函数validateText（）
{
var customer=document.PizzaForm.customer.value；
if（customer.length==0）
{
警告（“请输入您的姓名”）
}
var address=document.PizzaForm.address.value；
if（address.length==0）
{
警报（“请输入地址”）
}
var city=document.PizzaForm.city.value；
如果（city.length==0）
{
警报（“请进入一个城市。”）
}
var state=document.PizzaForm.state.value；
如果（state.length==0）
{
警报（“请输入状态”）
}
var zip=document.PizzaForm.zip.value；
如果（zip.length==0）
{
警报（“请输入邮政编码”）
}
var phone=document.PizzaForm.phone.value；
如果（phone.length==0）
{
警报（“请输入电话号码”）
}
var email=document.PizzaForm.email.value；
atpos=email.indexOf（“@”）；
dotpos=email.lastIndexOf（“.”）；
if（atpos<1 | |（dotpos-atpos<2））
{
警报（“请输入电子邮件地址”）
返回false；
}
返回true；
}
函数validateRadio（）
{
if（document.PizzaForm.size[0]。选中）返回true；
if（document.PizzaForm.size[1]。选中）返回true；
if（document.PizzaForm.size[2]。选中）返回true；
if（document.PizzaForm.size[3]。选中）返回true；
if（document.PizzaForm.size.value==false）；
{
提醒（“请选择披萨大小。”）；
}
返回；
}
函数validateCheck（）
{
if（document.PizzaForm.toppings[0]。选中==false&&
document.PizzaForm.toppings[1]。选中==false&&
document.PizzaForm.toppings[2]。选中==false&&
document.PizzaForm.toppings[3]。选中==false&&
document.PizzaForm.toppings[4]。选中==false&&
document.PizzaForm.toppings[5]。选中==false&&
document.PizzaForm.toppings[6]。选中==false&&
document.PizzaForm.toppings[7]。选中==false&&
document.PizzaForm.toppings[8]。选中==false）
{
提醒（“请从您的选择中选择一种配料。”）；
}
返回false；
返回true；
}
比萨饼店

步骤1：输入您的姓名、地址和电话号码：
名称：

地址：

城市：
声明：
邮政编码：

电话：

电子邮件：




第2步：选择您想要的比萨饼尺寸：
小的
中等
大的
巨无霸




步骤3：选择您想要的比萨配料：
意大利 辣味 香肠
加拿大熏肉
香肠

蘑菇
菠萝
黑橄榄

青椒
额外的奶酪
无
简单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>


HTML和JavaScript
函数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.size[0]。选中=false；
document.PizzaForm.size[1]。选中=false；
document.PizzaForm.size[2]。选中=false；
document.PizzaForm.size[3]。选中=false；
document.PizzaForm.toppings[0]。选中=false；
document.PizzaForm.toppings[1]。选中=false；
document.PizzaForm.toppings[2]。选中=false；
document.PizzaForm.toppings[3]。选中=false；
document.PizzaForm.toppings[4]。选中=false；
document.PizzaForm.toppings[5]。选中=false；
document.PizzaForm.toppings[6]。选中=false；
document.PizzaForm.toppings[7]。选中=false；
document.PizzaForm.toppings[8]。选中=false；
返回；
}
函数doSubmit（）
{
如果（validateText（）==true）；
if（validateRadio（）==true）；
如果（validateCheck（）==true）；
var toppings=“”；

对于（i=0；i您有太多不必要的代码和if条件。我建议您研究使用类名和for循环。您会发现90%的javascript被放入一个if条件。
CheckboxElement.checked
测试复选框的布尔值。显然，
CheckboxElement.value
是复选框的值。使用condi选项和循环。
if（CheckboxElement.checked）{someArray.push（CheckboxElement.value）}
。当然，您需要定义someArray。然后您可以
.join（）
i

<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>