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

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

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

如果你给所有复选框命名相同的名称，你实际上是在一个数组中创建一个数组 - 大妈妈熊数组是形式[0]并且在她里面是婴儿熊数组（你的复选框名称[]）

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

希望这会有所帮助：）

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

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

3 个答案: