Javascript表单验证复选框和单选不起作用

查看此柱塞:https://plnkr.co/edit/5NiIA1w9axvmOJEjXVlP

function validateForm() {
  var radios = document.getElementsByTagName('input');
  var value;
  var paymentMethodSelected = false;
  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);
      paymentMethodSelected = true;
    }
  }
  if (!paymentMethodSelected) {
    alert("You must select a payment method.");
    return false;
  }
  return true;
}

• 你没有结束的form标签(不重要，但良好的做法)
• 在检查所有单选按钮之前，您正在从验证函数返回
• 对无效表单状态的检查应该在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;
}

您可以将属性checked放在任何一个单选按钮中。例如

<label><input type="radio" name="cc" value="Visa" checked>Visa</label><br>

如果你想确保在表单提交之前至少有一个复选框和一个单选按钮被选中，那么你可以在脚本中引入计数器变量，它将计算在循环中选中了多少个复选框和单选按钮。

在返回之前，至少选中一个复选框和一个单选，如下所示:

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

这是你的javascript正在做的。

它检查第一个单选按钮，发现它没有被选中，所以它执行else语句并提醒你必须选择一张卡片或其他东西。然后它遇到返回false语句并退出循环(不管它返回什么，返回语句都会退出循环)。就是这样。

如果您使用已检查的属性选中了第一个复选框，它将发现第一个单选按钮被选中，然后警告它并在不检查其余按钮的情况下返回循环。如果要编辑for循环，则问题中的for循环未关闭。

您应该只在for循环之后提示用户付款选择，尝试以下代码片段:

function validateForm() {
  var payments = document.getElementsByName("cc");
  var count = payments.length;
  var selected = false;
  while (count--)
    if (selected = payments[count].checked)
      break;
  if (!selected) {
    alert('Choose payment method');
    return false;
  }
  return true;
}

<form name="bulbform" action="compute.php" onsubmit=" return validateForm()" method="post">
  <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>

感谢Mahesh Bansod的帮助，我使用了他们的例子并根据我的需要进行了调整。下面是我的工作验证代码的文本框，复选框和单选。

function validateForm(){
  //check to make sure the name is not blank
  var cusName = document.forms["bulbform"]["name"].value;
  if (cusName == null || cusName == ""){
    alert("Your name must be filled out.");
    return false;
  }
  //check to see that atleast one radio and checkbox are checked
  var inputs = document.getElementsByTagName('input');
  var checkCheckBox=false, checkRadio=false; //set both rado and checkbox to false
  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].type == 'checkbox' && inputs[i].checked) {
      checkCheckBox=true; //set checkbox true if one is checked
    }
    else if(inputs[i].type == 'radio' && inputs[i].checked) {
      checkRadio=true; //set radio true if one is checked
    }
    if(checkRadio && checkCheckBox) return true; //if both are true return true
  }
  //if checkbox is false alert user and return false
  if(!checkCheckBox){
    alert("You must select atleast one item.");
    return false; //
  }
  //if radio is false alert user and return false
  if(!checkRadio){
    alert("You must select a payment method.");
    return false;
  }
}