我有一个具有多个复选框的表单,我希望使用JavaScript确保至少选中一个复选框。这就是我现在所拥有的,但无论选择什么,都会弹出一个警告。
JS (错误)
function valthis(){
if (document.FC.c1.checked) {
alert ("thank you for checking a checkbox")
} else {
alert ("please check a checkbox")
}
}
HTML
<p>Please select at least one Checkbox</p>
<br>
<br>
<form name = "FC">
<input type = "checkbox" name = "c1" value = "c1"/> C1
<br>
<input type = "checkbox" name = "c1" value = "c2"/> C2
<br>
<input type = "checkbox" name = "c1" value = "c3"/> C3
<br>
<input type = "checkbox" name = "c1" value = "c4"/> C4
<br>
</form>
<br>
<br>
<input type = "button" value = "Edit and Report" onClick = "valthisform();">
所以我最终在JS中做的是:
:
function valthisform(){
var chkd = document.FC.c1.checked || document.FC.c2.checked||document.FC.c3.checked|| document.FC.c4.checked
if (chkd == true){
} else {
alert ("please check a checkbox")
}
}
我决定去掉“谢谢”这一部分,以适应剩下的任务。非常感谢,每个人的建议真的很有帮助。
发布于 2012-08-03 00:40:54
如果您打算引用两个复选框(如document.FC.c1
),则应避免使用两个同名的复选框。如果你有多个名为c1
的复选框,浏览器怎么知道你指的是哪一个呢?
下面是一个非jQuery解决方案,用于检查是否选中了页面上的任何复选框。
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);
您需要Array.prototype.slice.call
部件将document.querySelectorAll
返回的NodeList
转换为可对其调用some
的数组。
发布于 2020-01-01 21:00:20
我会选择一种更实用的方法。自从ES6以来,我们已经有了这么好的工具来解决我们的问题,所以为什么不使用它们呢?让我们首先给复选框一个类,这样我们就可以很好地将它们四舍五入。我更喜欢使用类而不是inputtype="checkbox“,因为现在的解决方案更加通用,并且当您的文档中有更多组的checkbox时也可以使用。
HTML
<input type="checkbox" class="checkbox" value=ck1 /> ck1<br />
<input type="checkbox" class="checkbox" value=ck2 /> ck2<br />
JavaScript
function atLeastOneCheckboxIsChecked(){
const checkboxes = Array.from(document.querySelectorAll(".checkbox"));
return checkboxes.reduce((acc, curr) => acc || curr.checked, false);
}
调用时,如果未选中任何复选框,则函数将返回false;如果一个复选框或两个复选框都选中,则返回true。
它的工作原理如下,reducer函数有两个参数,累加器(acc)和当前值(curr)。对于数组上的每次迭代,如果累加器或当前值为true,则缩减程序将返回true。上一次迭代的返回值是当前迭代的累加器,因此,如果它为真,它将一直保持为真直到结束。
发布于 2012-08-03 01:19:34
您不能通过表单输入的名称访问表单输入。请改用document.getElements
方法。
https://stackoverflow.com/questions/11787665
复制