Javascript 验证代码以确保至少标记了一个复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17372234/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript validation code to make sure that at least one checkbox is marked
提问by Leo Vorontsov
How would I add javascript validation to make sure that at least one of the items is checked?
我将如何添加 javascript 验证以确保至少检查了一项？
Select from courses below:
从以下课程中选择：
<ul id="class_prices">
<li>
<input onclick="update()" name="lbsm" id="lsbm" type="checkbox" value="lbsm">
<label>Law & Business Study Material (.00)</label>
</li>
<li>
<input onclick="update()" name="tsm" id="tsm" type="checkbox" value="tsm">
<label>Trade Study Material (.00)</label>
</li>
<li>
<input onclick="update()" name="lbepc" id="lbepc" type="checkbox" value="lbepc">
<label>Law & Business Exam Preperation Class (.00)</label>
</li>
<li>
<input onclick="update()" name="tepc" id="tepc" type="checkbox" value="tepc">
<label>Trade Exam Preperation Class (.00)</label>
</li>
</ul>
</td>
<td><h2>$<span id="coursetotal"></span></h2></td>
</tr>
Here is javascript code that I have, which does not work.
这是我拥有的 javascript 代码，它不起作用。
<script type="text/javascript">
function valthisform() {
var chkd = document.form1.lsbm.checked || document.form1.tsm.checked|| document.form1.lbepc.checked|| document.form1.tepc.checked
if (chkd == true) { } else { alert ("please check a checkbox") }
}
</script>
I will appreciate your feedback.
我将感谢您的反馈。
采纳答案by Sumurai8
I just tested your javascript and it seems to be working as you expected. There is one problem with the script itself, and that is that it doesn't return a value.
我刚刚测试了您的 javascript，它似乎按您的预期工作。脚本本身存在一个问题，那就是它不返回值。
<script type="text/javascript">
function valthisform() {
var chkd = document.form1.lsbm.checked || document.form1.tsm.checked|| document.form1.lbepc.checked|| document.form1.tepc.checked
if (chkd) {
return true; //Submit the form
} else {
alert ("please check a checkbox");
return false; //Prevent it from being submitted
}
}
</script>
LiveValidationForm has a submit handler attached to the form too and that handler might interfere with your handler and/or prevent the form from being submitted.
LiveValidationForm 也有一个附加到表单的提交处理程序，该处理程序可能会干扰您的处理程序和/或阻止提交表单。
Fun fact: You have document.form1.lsbm.checkedproperly misspelled in your javascript, as the element in your document has a properly misspelled id of lsbminstead of lbsmtoo.
有趣的事实：您document.form1.lsbm.checked在 javascript 中拼错了，因为文档中的元素有一个拼错的 idlsbm而不是lbsmtoo。
回答by adeneo
Get all the checkboxes inside the UL, and if any of them are checked, set the chkdvariable to true :
获取 UL 中的所有复选框，如果其中任何一个被选中，则将chkd变量设置为 true ：
var inputs = document.getElementById('class_prices').getElementsByTagName('input'),
chkd = false;
for (var i=inputs.length; i--;) {
if (inputs[i].type.toLowerCase() == 'checkbox' && inputs[i].checked) chkd = true;
}
回答by Rupesh Wankhede
Try this code..
试试这个代码..
HTML
HTML
<ul>
<li><label><input type="checkbox" value="id1" style="margin-right: 10px;" name="class" checked> ABC</label></li>
<li><label><input type="checkbox" value="id2" style="margin-right: 10px;" name="class" checked>XYZ</label></li>
<li><label><input type="checkbox" value="id3" style="margin-right: 10px;"name="class" checked> LMN</label></li>
</ul>
JavaScript:
JavaScript：
<script>
$('input[type="checkbox"][name="class"]').on('change', function () {
var getArrVal = $('input[type="checkbox"][name="class"]:checked').map(function () {
return this.value;
}).toArray();
if (getArrVal.length) {
//execute the code
} else {
$(this).prop("checked", true);
alert("Select at least one column");
return false;
}
});
</script>
