Javascript复选框验证不检查是否勾选

Question

我已经查看了人们已经提出的很多问题，但我找不到对我有帮助的解决方案。

我是编程初学者，所以不知道该做什么，我有四个复选框，要提交表单，您必须至少选择其中一个，但没有消息出现并且表单能够提交时不要勾选任何一个框。

下面是我的代码：

        <tr>
       <td align="right">
        <label for="erdbeersocken"><p>Erdbeersocken<sup>*</sup>:</label>
        <br>
        <label for="armstulpen">Armstulpen<sup>*</sup>:</label>
        <br>
        <label for="cupcakes">Cupcakes<sup>*</sup>:</label>
        <br>
        <label for="babykleidung">Babykleidung<sup>*</sup>:</label>
        <br>
       </td>       
       <td align="left">
<form action="../" onsubmit="return checkCheckBoxes(this);">
    <input type="CHECKBOX" name="CHECKBOX_1" value="Erdbeersocken">
    <br>
    <input type="CHECKBOX" name="CHECKBOX_2" value="Armstulpen">
    <br>
    <input type="CHECKBOX" name="CHECKBOX_3" value="Cupcakes">
    <br>
    <input type="CHECKBOX" name="CHECKBOX_4" value="Babykleidung">
    <br>
    <input type="SUBMIT" value="Submit!">
    </td>
</tr>   
</form>

<script type="text/javascript" language="JavaScript">
<!--
function checkCheckBoxes(theForm) {
    if (
    theForm.CHECKBOX_1.checked == false or
    theForm.CHECKBOX_2.checked == false or
    theForm.CHECKBOX_3.checked == false or
    theForm.CHECKBOX_4.checked == false)
    {
        alert ('You didn\'t choose any of the checkboxes!');
        return false;
    } else {    
        return true;
    }
}
//-->
</script>

看起来像：此处为文本（此处为复选框）

我正在使用 Notepadd++ 更高级的代码似乎不起作用，所以如果有人可以帮助我简化 JavaScript，我将不胜感激。 :)

Answer 1

  function checkCheckBoxes(theForm) {
     if ($("input[type='checkbox']:checked").length){
        return true;
     }else{
          alert ('You didn\'t choose any of the checkboxes!');
         return false;
     }
 }

Answer 2

对于您的表单，您应该为所有复选框赋予相同的名称，但为每个复选框赋予不同的值——这将为您的复选框创建一个数组（如果您还不知道数组是什么，请参阅回复底部的注释是）：

<input type="CHECKBOX" name="CHECKBOX" value="Erdbeersocken">
<br>
<input type="CHECKBOX" name="CHECKBOX" value="Armstulpen">
<br>
<input type="CHECKBOX" name="CHECKBOX" value="Cupcakes">
<br>
<input type="CHECKBOX" name="CHECKBOX" value="Babykleidung">

然后在您的确认提交函数中，您希望使用带有两个嵌套 if 语句的 for 循环来检查复选框是否已被选中。我举一个我最近做的代码的例子：

var interestsSelected = false;
for (var i = 0; i < document.forms[0].interests.length; ++i ) {
if (document.forms[0].interests[i].checked == true) {
interestsSelected = true;
break;
//code gives go ahead for submission because at least one checkbox has been checked
        }
    }
 if (interestsSelected !=true) {
        window.alert("You must select at least one hobby or interest");
        return false;
        //code Woot woot woot!  It all works!
    }

这是我的复选框表单部分：

<input type="checkbox" name="interests" value="technology" />Technology <br />
<input type="checkbox" name="interests" value="arts" />The Arts <br />
<input type="checkbox" name="interests" value="music" />Music <br />
<input type="checkbox" name="interests" value="film" />Movies <br/> 
<input type="checkbox" name="interests" value="shopping" />Shopping <br />
<input type="checkbox" name="interests" value="outdoor" />Camping <br />
<input type="checkbox" name="interests" value="garden" />Gardening <br />

作为一个初学者 :) 我经常发现如果所有内容都用尽可能简单的语言拼写出来会很有用，所以我将在这里提供一些您可能已经知道或可能不知道的细节。

每当您创建表单时，都会自动创建表单的数组（您不会在任何地方看到它，浏览器会在访问表单数据时自动创建一个但您可以（应该）在您的编码）。因此，如果您的页面上有一个表单，您将有一个数组 forms[0]，如果您的页面上有两个不同的表单，那么第一个表单将有一个数组 forms[0]，第二个表单将有一个数组 forms[ 1]，每个都包含相应表单中的所有元素。

如果您将所有复选框命名为相同的名称，您实际上是在一个数组中创建一个数组——大的 Mama Bear 数组是 forms[0]，而位于她里面的是 Baby Bear 数组（您的复选框名称 []） .

为了引用 Baby Bear 数组，您必须首先确认 Mama Bear 数组：这就是为什么在我上面给出的代码示例中，您会看到后面跟着“document.forms[0]”（Mama Bear 数组）通过“.interests[i]”（小熊数组）。

希望这会有所帮助:)

Answer 3

HTML 用于我的示例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<p>Select a box</p>
<form id="aform">
    <input type="checkbox">
    <input type="checkbox">
</form>

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="test.js"></script>
</body>
</html>

而 javascript 在其自己的文件中（始终将代码与 css 和 html 分开）

window.onload=function() {
    $("#aform").change(function () {
        alert('a box is checked');
    })
};