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

Question

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

我是编程初学者，所以不太了解该做什么，我有四个复选框，要提交表单，您必须 select 至少选中一个，但没有消息出现并且无需勾选其中一个框即可提交表单。

下面是我的代码：

        <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

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

Answer 3

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

<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], 每个包含各自形式的所有元素。

如果您将所有复选框命名为相同的名称，那么您实际上是在一个数组中创建一个数组——大熊妈妈数组是 forms[0]，位于她里面的是熊宝宝数组（您的复选框名称[ ]).

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

希望这对您有所帮助:)

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

Javascript Checkbox Validation not Checking if Ticked

html

javascript

validation

checkbox

notepad++