关于我昨天问的一个问题验证是否有一个选中的复选框 AngularJS
正如我昨天所说,我有一个复选框列表,我必须查看是否至少选择了一个,但出现了另一个问题,因为使用该功能,它验证了表单的所有复选框,当然现在我已经完成了表格,我必须添加 2 个复选框,加上一个用于隐私政策,另一个用于如果您已达到法定年龄,则必须单独验证,一个用于年龄复选框,另一个用于隐私
<form id="formDetails" name="formDetails" ng-submit="sendForm()">
<div class="col-xs-12 col-md-12">
<div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
<label class="checkbox-inline"><input type="checkbox" id="topic" name="topic">Children's</label>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
<label class="checkbox-inline"><input type="checkbox" name="topic" id="topic"> Health & Beauty</label>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
<label class="checkbox-inline"><input type="checkbox" name="topic" id="topic">Science & Nature</label>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
<label class="checkbox-inline"><input type="checkbox" name="topic" id="topic">Crafts & Hobbies</label>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
<label class="checkbox-inline"><input type="checkbox" name="topic" id="topic">History</label>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
<label class="checkbox-inline"><input type="checkbox" name="topic" id="topic">Sports & Fitness</label>
</div>
<span class="error" ng-show="formDetails.topic.$error.required">Please select at least one topic</span>
</div>
<div class="col-xs-12 col-md-12 policy">
<div class="form-group col-xs-12 col-sm-6 col-md-12 form-info check-policy">
<label class="checkbox-inline">
<input type="checkbox" ng-model="age" id="age" name="age">I can confirm I am over 16 years of age
<span class="error" ng-show="error">Please confirm you are over 16</span>
</label>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-12 form-info">
<label class="checkbox-inline">
<input type="checkbox" ng-model="terms" id="terms" name="terms">I agree to the terms of the Privacy Policy
<span class="error" ng-show="error">Please agree to the terms of the Privacy Policy</span>
</label>
</div>
</div>
<div>
<button type="submit" class="btn btn-danger">Sign Up</button>
</div>
</form>
我试图通过修改复选框的input[type=checkbox]:checked"
byinput[id=age]:checked"
或相应的 id 来修改传递给我的函数,但它不能正常工作,因为只能标记隐私政策的复选框,这已经验证了所有复选框,但如果只是缺少那个,它会在所有复选框中显示错误消息。
JS
var app = angular.module('formApp', []);
app.controller('formCtrl', function ($scope) {
$scope.error = false;
$scope.sendForm = function()
{
if($("#formDetails input[id=topic]:checked").length > 0) {
$scope.error = false;
}
else{
$scope.error = true;
}
if($("#formDetails input[id=age]:checked").length > 0) {
$scope.error = false;
}
else{
$scope.error = true;
}
if($("#formDetails input[id=terms]:checked").length > 0) {
$scope.error = false;
}
else{
$scope.error = true;
}
}
});
我怎么能这样做,以便当我点击按钮时,它会验证复选框,id=topic
一方面来自列表,另一方面是年龄复选框,另一方面id=age
是隐私策略复选框?id=terms
谢谢
只需查看每个复选框并检查它们是否被选中,就可以简化代码。在主题复选框的情况下,您所要做的就是搜索所有名称为“topic”的复选框,并且至少选中 1 个。在年龄和术语的情况下,只需要验证是否使用
is()
jquery 方法检查它们: