Javascript表单验证复选框和收音机不工作

我有一个表单需要用javascript验证，以确保至少选中了一个复选框和一个收音机。我知道使用jQuery可能会更容易，但我正试图用纯javascript实现这一点。代码如下：

<form name="bulbform" action="compute.php"  onsubmit=" return validateForm()" method="post">
<p>Enter your name: <input type="text" name="name" size="20"></p>
<p><strong>Light Bulbs</strong></p>
<label><input type="checkbox" name="bulbs[]" value="2.39">Four 25-watt light bulbs for  $2.39</label><br>
<label><input type="checkbox" name="bulbs[]" value="4.29">Eight 25-watt light bulbs for  $4.29</label><br>
<label><input type="checkbox" name="bulbs[]" value="3.95">Four 25-watt long-life light bulbs $3.95</label><br>
<label><input type="checkbox" name="bulbs[]" value="7.49">Eight 25-watt long-life light bulbs $7.45</label><br>
<p><strong>Payment Method</strong></p>
<label><input type="radio" name="cc" value="Visa">Visa</label><br>
<label><input type="radio" name="cc" value="Master Card">Master Card</label><br>
<label><input type="radio" name="cc" value="Discover">Discover</label><br>
<p><input type="submit" value="Order" /> <input type="reset" value="Clear form"/></p></form>

输入您的姓名：

灯泡

四个25瓦的灯泡，售价2.39美元

八个25瓦的灯泡，售价4.29美元

四个25瓦长寿命灯泡3.95美元

八个25瓦长寿命灯泡7.45美元

付款方式

维萨

万事达卡

发现

这是我的javascript

  var radios = document.getElementsByTagName('input');
  var value;
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].type === 'radio' && radios[i].checked) {
      // get value, set checked flag or do whatever you need to
      value = radios[i].value;
      alert(value);
      return true;
    }
    else{
      alert("You must select a payment method.")
      return false;
    }

var radios=document.getElementsByTagName（'input'）；
var值；
对于（变量i=0；i

删除else后，我可以显示所选的信用卡，但当我添加else时，它总是说您必须选择一种付款方式，而且永远不会是真的……提前感谢您提供的任何建议。

请参阅此插件：

函数validateForm（）{
var radios=document.getElementsByTagName（'input'）；
var值；
var paymentMethodSelected=false；
对于（变量i=0；i

• 您没有结尾

  表单

  标记（不重要，但良好实践）
• 在选中所有单选按钮之前，您正在从验证功能返回
• 无效表单状态的检查应在

  for

  循环之外处理

请参见本指南：

函数validateForm（）{
var radios=document.getElementsByTagName（'input'）；
var值；
var paymentMethodSelected=false；
对于（变量i=0；i

• 您没有结尾

  表单

  标记（不重要，但良好实践）
• 在选中所有单选按钮之前，您正在从验证功能返回
• 无效表单状态的检查应在

  for

  循环之外处理

---

变量

radios

包含复选框、文本框和单选按钮。 单选按钮和文本框不是复选框。
因此，条件

radios[i].type=='radio'&&radios.type='checked'

将计算为

false

，其余部分将计算

下面的代码使用变量

checkedCB

和

checkedRadio

来存储是否选中了任何复选框或单选按钮

试着这样做：

function validateForm() {
  var inputs = document.getElementsByTagName('input');
  var valued;
  var checkedCB=false,checkedRadio=false;
  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].type == 'checkbox' && inputs[i].checked) {
            checkedCB=true;
    }
    else if(inputs[i].type == 'radio' && inputs[i].checked) {
        checkedRadio=true;
    }
    if(checkedRadio && checkedCB) return true;
  }
  alert("You must select atleast one light bulb and a payment method.");
  return false;
}

---

变量

radios

包含复选框、文本框和单选按钮。 单选按钮和文本框不是复选框。
因此，条件

radios[i].type=='radio'&&radios.type='checked'

将计算为

false

，其余部分将计算

下面的代码使用变量

checkedCB

和

checkedRadio

来存储是否选中了任何复选框或单选按钮

试着这样做：

function validateForm() {
  var inputs = document.getElementsByTagName('input');
  var valued;
  var checkedCB=false,checkedRadio=false;
  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].type == 'checkbox' && inputs[i].checked) {
            checkedCB=true;
    }
    else if(inputs[i].type == 'radio' && inputs[i].checked) {
        checkedRadio=true;
    }
    if(checkedRadio && checkedCB) return true;
  }
  alert("You must select atleast one light bulb and a payment method.");
  return false;
}

---

如果您想确保在表单提交之前至少选中一个复选框和一个单选项，那么可以在脚本中引入counters变量，该变量将计算循环中选中的复选框和单选按钮的数量

返回之前，只需选中至少一个复选框和一个收音机，如下所示：

if(checkbox_checked_count>=1&&radio_checked_count==1){
alert("Yahoo! You have successfully validated your form.")
return true;
}else{
  alert("You must select a payment method.")
  return false;
}

您的validateForm（）函数完整脚本可能如下所示：

function validateForm(){
var inputs = document.getElementsByTagName('input');
var radio_checked_count=0;
var checkbox_checked_count=0;
var i;
for (i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox"&&inputs[i].checked) {
    checkbox_checked_count++;
}
if (inputs[i].type == "radio"&&inputs[i].checked) {
    radio_checked_count++;
}   
}  

if(checkbox_checked_count>=1&&radio_checked_count==1){
alert("Yahoo! You have successfully validated your form.")
return true;
}else{
  alert("You must select a payment method.")
  return false;
}

} 

函数validateForm（）{
var inputs=document.getElementsByTagName（'input'）；
var无线电检查计数=0；
var checkbox\u checked\u count=0；
var i；
对于（i=0；i=1&&radio\u选中\u计数==1）{
警报（“雅虎！您已成功验证您的表单。”）
返回true；
}否则{
警报（“您必须选择付款方式。”）
返回false；
}
} 

如果要确保在表单提交之前至少选中一个复选框和一个单选项，则可以在脚本中引入计数器变量，以计算循环中选中的复选框和单选按钮的数量

返回之前，只需选中至少一个复选框和一个收音机，如下所示：

if(checkbox_checked_count>=1&&radio_checked_count==1){
alert("Yahoo! You have successfully validated your form.")
return true;
}else{
  alert("You must select a payment method.")
  return false;
}

您的validateForm（）函数完整脚本可能如下所示：

function validateForm(){
var inputs = document.getElementsByTagName('input');
var radio_checked_count=0;
var checkbox_checked_count=0;
var i;
for (i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox"&&inputs[i].checked) {
    checkbox_checked_count++;
}
if (inputs[i].type == "radio"&&inputs[i].checked) {
    radio_checked_count++;
}   
}  

if(checkbox_checked_count>=1&&radio_checked_count==1){
alert("Yahoo! You have successfully validated your form.")
return true;
}else{
  alert("You must select a payment method.")
  return false;
}

} 

函数validateForm（）{
var inputs=document.getElementsByTagName（'input'）；
var无线电检查计数=0；
var checkbox\u checked\u count=0；
var i；
对于（i=0；i=1&&radio\u选中\u计数==1）{
警报（“雅虎！您已成功验证您的表单。”）
返回true；
}否则{
警报（“您必须选择付款方式。”）
返回false；
}
} 

以下是您的javascript正在执行的操作

它检查第一个收音机按钮