[英]Javascript Checkbox Validation not Checking if Ticked
我已经仔细研究了人们已经对此提出的许多问题,但是我找不到能够帮助我的解决方案。
我是编程的初学者,所以对操作一无所知,我有四个复选框并提交表单,您必须至少选择其中一个,但不会出现任何消息,并且无需提交表单即可被打勾的盒子之一。
这是我的代码如下:
<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帮助我,我将不胜感激。 :)
function checkCheckBoxes(theForm) {
if ($("input[type='checkbox']:checked").length){
return true;
}else{
alert ('You didn\'t choose any of the checkboxes!');
return false;
}
}
对于您的表单,应为所有复选框赋予相同的名称,但为每个复选框赋予不同的值-这将为您的复选框创建一个数组(如果您尚不知道数组是什么,请参阅响应底部的注释):
<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]”(婴儿熊数组)。
希望这可以帮助 :)
以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');
})
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.