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">

然后在您的Confirm Submit函数中，您要使用带有两个嵌套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 />

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

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

如果将所有复选框都命名为相同的名称，则实际上是在数组中创建一个数组-大的Mama Bear数组为forms [0]，而嵌套在其中的是Baby Bear数组（您的复选框名[]）。

为了引用Baby Bear数组，您必须首先确认Mama Bear数组：这就是为什么在我上面给出的代码示例中，您看到“ document.forms [0]”（Mama Bear数组）后跟“”。兴趣[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');
    })
};