Question

大家好：我最近偶然发现了一个关于表单验证的问题，我目前正在尝试使用它。我从答案中得到了代码，然后将其定制为更多我需要的东西。：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function Validate(){
   if(!validateForm()){
       alert("Something happened");
       return false;
   }
return true
}
function validateForm()
{
    var c=document.getElementsByTagName('input');
    for (var i = 0; i<c.length; i++){
        if (c[i].type=='checkbox')
        {
            if (c[i].checked){return true}
        }
    }
    return false;
}
</script>
</head>
<body>
<form name="myForm" action="http://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png" onsubmit="return Validate()" method="get">
<input type="checkbox" name="live" value="yesno">You are alive.
<br>
<input type="checkbox" name="type" value="person">You are a person.
<br>
<input type="checkbox" name="eyes" value="color">Your eyes have color.
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>

注意：图片仅来自Google图片搜索，位于维基百科上（我不拥有）。

现在，当我最初从答案输入HTML到W3 Schools的Tryit编辑器时，它会给我一个“Something Happened”警报，或什么也不做。（我认为那是应该做的）。尽管如此（现在我有自己的问题），如果没有选择任何内容，它会说“发生了什么事”，但无论多少次检查（超过1次检查）它都会给我图像。基本上，我想要的是检查是否所有或仅检查了一些。如果所有都被检查我想要一个图像，如果只有一些，我想要一个不同的图像。我希望这不会太令人困惑，我感谢任何帮助：）

P.S.:这是我得到代码的问题：Original Question

Answer 1

试试这个（如果检查了一个或多个但是少于3个，将提醒第一个选项，如果检查了3个，则会提醒第二个选项）：

<!DOCTYPE html>
<html>
<body>
<input type="checkbox" name="live" value="yesno">You are alive.
<br>
<input type="checkbox" name="type" value="person">You are a person.
<br>
<input type="checkbox" name="eyes" value="color">Your eyes have color.
<br>
    <input value="Submit" type="submit" onclick="
var count = 0;
for(var i = 0; i < document.getElementsByTagName('input').length - 1; i++)
{
    if(document.getElementsByTagName('input')[i].checked)
{
    count += 1;
}
}
if(count >= 1 && count < 3)
{
    alert('First Option');
}else
{
    if(count == 3)
    {
        alert('Second Option');
    }
}" />
</body>
</html>

Answer 2

以下内容应该让您走上正确的道路：

function Validate() {
  var checkboxes = processCheckboxes();
  if (checkboxes.all.length == checkboxes.checked.length) {
    alert("All are checked");
  } else if (checkboxes.checked.length > 0) {
    alert("Some checked");
  } else {
    alert("None checked");
  }
  return false;
}

function processCheckboxes() {
  var checkboxes = document.querySelectorAll('input[type=checkbox]');
  var checked = [].filter.call( checkboxes, function( el ) {
    return el.checked
  });

  return { all: checkboxes, checked: checked };
}

然后，您可以在提交之前以您喜欢的任何方式处理选中的复选框。

请参阅此处的工作示例：http://jsfiddle.net/jkeyes/Zcu7d/

Answer 3

在脚本部分尝试此操作，它将更改表单＆＃34; s＆＃34; action＆＃34;属性（在提交时将表单指向所需的URL），验证检查了多少个复选框：

<script type="text/javascript">
    function Validate(formRef){
        var checkboxes = getCheckboxes(formRef);
        var checkedCount = validateForm(checkboxes);
        if(checkedCount == checkboxes.length){
            // All are checked!
            return true;
        } else if(checkedCount > 0) {
            // A few are checked!
            formRef.setAttribute('action', 'http://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Yahoo!_logo.svg/200px-Yahoo!_logo.svg.png');
            return true;
        } else {
            alert("Something happened");
        }
        return true;
    }

    function getCheckboxes(formRef) {
        var c = formRef.getElementsByTagName('input');
        var checkboxes = [];
        for (var i = 0; i<c.length; i++){
            if (c[i].type == 'checkbox')
            {
                checkboxes.push(c[i]);
            }
        }
        return checkboxes;
    }

    function validateForm(checkboxes) {
        var checkedCount = 0;
        for (var i = 0; i < checkboxes.length; i++){
            if (checkboxes[i].checked){
                checkedCount++;
            }
        }
        return checkedCount;
    }
</script>

应该更新表单HTML，以便将＃34;这个对要验证的表单对象的引用传递给Validate（）函数，以避免再次查询它：

<form name="myForm" action="http://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png" onsubmit="return Validate(this)" method="get">

验证复选框

3 个答案: