我是 jQuery 的初学者，我想知道如何在提交之前专门针对复选框验证表单。
我正在创建一个简单的检查列表表单，如果我的用户完成该步骤，他将在其中勾选一个复选框。我打算做的是，如果存在“未选中”复选框，脚本将阻止表单提交并用颜色突出显示。
这是我的代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.error {
background-color: #F00;
}
.valid {
background-color: #0F0;
}
</style>
<script type="application/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"> </script>
<script type="application/javascript">
$('#button').on('click', function() {
var $checkboxes = $('.container [type=checkbox]');
$checkboxes.filter(':checked').parent().removeClass('error').addClass('valid');
$checkboxes.not(':checked').parent().removeClass('valid').addClass('error');
});
</script>
</head>
<body>
<div class="container">
<input class="tick" id="option1" type="checkbox">
</div>
<div class="container">
<input class="tick" id="option1" type="checkbox">
</div>
<input id="button" type="button" value="check">
</body>
</html>所以我在这里想做的是，当用户单击按钮时，脚本将用红色突出显示所有未选中的复选框，并用绿色突出显示所有选中的复选框。
但是，我的脚本无法运行。我的脚本有什么问题吗？关于更有效的方法有什么建议吗？
最佳答案
尝试以下操作:
$(document).ready(function(){
var len = $('input[type=checkbox]').length;
$('#button').click(function(e){
var $cb = $('input[type=checkbox]');
$cb.filter(':checked').parent().removeClass('error');
var not = $cb.not(':checked').parent().addClass('error').length;
if (len == not) {
e.preventDefault(); // prevent the default action of the event
}
})
})
请注意，您的标记无效，ID 必须是唯一的。
关于javascript - 如何在 jQuery 中验证是否所有复选框都被选中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12613620/