Javascript 显示所选复选框和单选按钮的值及其在警报消息中的总数

在这里的人的帮助下，我几乎弄明白了我的整个系统。现在唯一困扰我的是如何显示选中复选框和单选按钮的名称和值，以及它们的总数，它们位于html下面的文本框中。我正确地验证了复选框和单选按钮，但由于某种原因，当我将它们放在finalVal（）函数中时，整个系统将无法工作。我不知道该怎么解决这个问题

这是我的HTML：

<h2>We'd Like to Know More About You!</h2>
<form name="info">
Name: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp <input type = "text" id = "inf" name = "name" placeholder="Enter a valid name">*</br></br>
Address: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp <input type = "text" id = "inf" name = "address" placeholder="Enter a valid address"></br></br>
Email Address: &nbsp <input type="email" id = "inf" name="email" placeholder="Enter a valid email address">*</br></br>
Phone Number: &nbsp <input type = "tel" id = "inf" name ="PN"  placeholder="Enter a valid phone number">*</br></br>
<hr/> 
</form>

<h2>What Kind of Burger Would You Like to Order?</h2>
<form name ="burgz">

Add-ons <br/>
&nbsp &nbsp <input type="checkbox" name="AO"  value="45" onchange="calculate(this);">Bacon - 45
&nbsp &nbsp <input type="checkbox" name="AO"  value="40" onchange="calculate(this);">Sausage - 40
&nbsp &nbsp <input type="checkbox" name="AO"  value="30" onchange="calculate(this);">Ham - 30
&nbsp &nbsp <input type="checkbox" name="AO"  value="10" onchange="calculate(this);">Tomatoes - 10
&nbsp &nbsp <input type="checkbox" name="AO"  value="3" onchange="calculate(this);">Peppers - 3
&nbsp &nbsp <input type="checkbox" name="AO"  value="5" onchange="calculate(this);">Olives - 5
&nbsp &nbsp <input type="checkbox" name="AO"  value="15" onchange="calculate(this);">Extra Cheese - 15
<br/>


Size<br/>
&nbsp &nbsp <input type="radio" name="size"  value="10" onchange="calculate(this);">Small - 10
&nbsp &nbsp <input type="radio" name="size" value="20" onchange="calculate(this);">Medium - 20
&nbsp &nbsp <input type="radio" name="size" value="30" onchange="calculate(this);">Large - 30
<input type="hidden" name="size">
<br/>


Shape<br/>
&nbsp &nbsp <input type="radio" name="shape" value="15" onchange="calculate(this);">Round - 15
&nbsp &nbsp <input type="radio" name="shape" value="10" onchange="calculate(this);">Square - 10
<input type="hidden" name="shape">
<br/>

<p>Total Price: <input type="text" name="total_price" value="0" readonly="readonly"></p>
<input type = "button" onClick = "displayInfo()" value ="Submit Info">
</form>
</body>

我们想了解更多关于您的信息！
名称：    *


地址：   


电子邮件地址：*


电话号码：*



您想要点什么样的汉堡？
附加组件

 培根-45
 香肠-40
&火腿-30
 西红柿-10
&辣椒-3
 橄榄-5
 额外奶酪-15


大小

 小型-10
 中等-20
 大型-30


形状

&第15轮
  Square-10


总价：

以下是我的Javascript：

<script type = "text/javascript">

///////////validations
function ValEntry(){
    var valid = true;

    if ( document.info.name.value== ""||document.info.address.value== ""||document.info.email.value== ""||document.info.PN.value == "" )
    {
        alert ( "Please fill up the remaining text boxes" );
        valid = false;
    }
    return valid;
}

function checkemail(){
    var testresults1
    var str=document.info.email.value
    var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i

    if (filter.test(str))
    testresults1=true
    else{
    alert("Please input a valid email address!")
    testresults1=false
    }
return (testresults1)
}

function checkphone(){
    var testresults2
    var int = document.info.PN.value
    var filter2= /[1-9]/g;

    if (filter2.test(int))
    testresults2=true
    else{
    alert("Please input a valid phone number!")
    testresults2=false
}
return (testresults2)
}

function validate(){
    if (document.info.email.value)
    return checkemail()
    else{
    return true
    }       
}

function validate2(){
    if (document.info.PN.value)
    return checkphone()
    else{
    return true
    }       
}

function validateCheck()
{
    if (document.burgz.AO[0].checked == false &&
        document.burgz.AO[1].checked == false &&
        document.burgz.AO[2].checked == false &&
        document.burgz.AO[3].checked == false &&
        document.burgz.AO[4].checked == false &&
        document.burgz.AO[5].checked == false &&
        document.burgz.AO[6].checked == false)
        {
            alert("Please pick any add-ons of your choice.");

        }
        return false;
        return true;

}


function validateRadio()
{
    if (document.burgz.size[0].checked) return true;
    if (document.burgz.size[1].checked) return true;
    if (document.burgz.size[2].checked) return true;
    if (document.burgz.size.value == false);
    {
        alert("Please choose a size.");

    }
        return;
}
function validateRadio2()
{
    if (document.burgz.shape[0].checked) return true;
    if (document.burgz.shape[1].checked) return true;
    if (document.burgz.shape.value == false);
    {
        alert("Please choose a shape.");

    }
        return;
}



function FinalVal(){
    return ValEntry() && validate() && validate2();

}


///////////auto-total 

var lastSizeVal = 0;
var lastShapeVal = 0;

function calculate(input) {
    var total = parseInt(burgz.total_price.value);
    var value = parseInt(input.value);

    if (input.type === 'radio') {
        if (input.name === 'size') {
            total -= lastSizeVal;
            lastSizeVal = value;
        }
        else {
            total -= lastShapeVal;
            lastShapeVal = value;
        }
    }

    if (input.checked)
        burgz.total_price.value = total + value
    else
        burgz.total_price.value = total - value;
}


////////////Display information


function displayInfo(){
if (FinalVal()) 

    {
        var fields=["name", "address", "email", "PN"];
        var fieldNames=["Name", "Address", "Email Address", "Phone Number"];
        var msg = "";

        for(i=0;i<fields.length;i++)
            msg += fieldNames[i] + ": " + document.info[ fields[i] ].value + "\n";


        alert(msg);
    }
    return true;
}

</script>

///////////验证
函数ValEntry（）{
var valid=true；
如果（document.info.name.value==“document.info.address.value==“document.info.email.value==“document.info.PN.value==”）
{
警告（“请填写剩余的文本框”）；
有效=错误；
}
返回有效；
}
函数checkemail（）{
var testresults1
var str=document.info.email.value
var filter=/^（[\w-]+（？：\[\w-]+）*）@（（？：[\w-]+\）*\w[\w-]{0,66}）\.（[a-z]{2,6}:（\.[a-z]{2}）$/i
if（过滤测试（str））
testresults1=true
否则{
警报（“请输入有效的电子邮件地址！”）
testresults1=false
}
返回（testresults1）
}
函数checkphone（）{
var testresults2
var int=document.info.PN.value
变量过滤器2=/[1-9]/g；
if（过滤器2.测试（int））
testresults2=true
否则{
警报（“请输入有效的电话号码！”）
testresults2=false
}
返回（testresults2）
}
函数验证（）{
if（document.info.email.value）
返回checkemail（）
否则{
返回真值
}       
}
函数validate2（）{
if（文档信息PN值）
返回checkphone（）
否则{
返回真值
}       
}
函数validateCheck（）
{
if（document.burgz.AO[0]。选中==false&&
document.burgz.AO[1]。选中==false&&
document.burgz.AO[2]。选中==false&&
document.burgz.AO[3]。选中==false&&
document.burgz.AO[4]。选中==false&&
document.burgz.AO[5]。选中==false&&
document.burgz.AO[6]。选中==false）
{
提醒（“请选择您选择的任何附加组件”）；
}
返回false；
返回true；
}
函数validateRadio（）
{
if（document.burgz.size[0]。选中）返回true；
if（document.burgz.size[1]。选中）返回true；
if（document.burgz.size[2]。选中）返回true；
if（document.burgz.size.value==false）；
{
提醒（“请选择尺码”）；
}
返回；
}
函数validateRadio2（）
{
if（document.burgz.shape[0].选中）返回true；
if（document.burgz.shape[1].选中）返回true；
if（document.burgz.shape.value==false）；
{
提醒（“请选择一个形状”）；
}
返回；
}
函数FinalVal（）{
返回ValEntry（）&&validate（）&&validate2（）；
}
///////////自动总计
var lastSizeVal=0；
var lastShapeVal=0；
函数计算（输入）{
var total=parseInt（burgz.总价.价值）；
var值=parseInt（input.value）；
如果（input.type==='radio'）{
如果（input.name=='size'）{
总计-=最近一次；
lastSizeVal=数值；
}
否则{
总计-=最后一次形状评估；
lastShapeVal=值；
}
}
如果（输入。选中）
burgz.total_price.value=总额+价值
其他的
burgz.total_price.value=总价值；
}
////////////显示信息
函数displayInfo（）{
if（FinalVal（））
{
变量字段=[“名称”、“地址”、“电子邮件”、“PN”]；
var fieldNames=[“姓名”、“地址”、“电子邮件地址”、“电话号码”]；
var msg=“”；
对于（i=0；i您在if条件中使用
FinalVal
函数：

function displayInfo(){
    if (FinalVal()) {
        var fields=["name", "address", "email", "PN"];
        var fieldNames=["Name", "Address", "Email Address", "Phone Number"];
        var msg = "";
        for(i=0;i<fields.length;i++)
            msg += fieldNames[i] + ": " + document.info[ fields[i] ].value + "\n";
        alert(msg);
    }
    return true;
}

但是您的
validateCheck
或
validateRadio
函数总是返回未定义的（请记住，简单的
return
无值返回未定义的值，这是错误的值）。
要解决此问题，请更改验证函数，使其显式返回true或false值，如下所示：


//验证
函数ValEntry（）{
var valid=true；
如果（document.info.name.value==“document.info.address.value==“document.info.email.value==“document.info.PN.value==”）
{
警告（“请填写剩余的文本框”）；
有效=错误；
}
返回有效；
}
函数checkemail（）{
var testresults1
var str=document.info.email.value
var filter=/^（[\w-]+（？：\[\w-]+）*）@（（？：[\w-]+\）*\w[\w-]{0,66}）\.（[a-z]{2,6}:（\.[a-z]{2}）$/i
if（过滤测试（str））
testresults1=true
否则{
警报（“请输入有效的电子邮件地址！”）
testresults1=false
}
返回（testresults1）
}
函数checkphone（）{
var testresults2
var int=document.info.PN.value
变量过滤器2=/[1-9]/g；
if（过滤器2.测试（int））
testresults2=true
否则{
警报（“请输入有效的电话号码！”）
testresults2=false
}
返回（testresults2）
}
函数验证（）{
if（document.info.email.value）
返回checkemail（）
否则{
返回真值
}       
}
函数validate2（）{
if（文档信息PN值）
返回checkphone（）
否则{
返回真值
}       
}
函数validateCheck（）
{
如果（document.burg
function FinalVal(){
    return ValEntry() && validate() && validate2() && validateRadio() && validateRadio2() && validateCheck();
}