如何创建 function 以检查是否至少选中了一个复选框？

Question

<div class="form-group">
<div class="row" style="margin-top: 10px;">
<div class="weekDays-selector checkbox-inline" 
     ng-repeat="day in vm.days" 
     ng-if="vm.pen.feeding_frequency.name == 'Custom'">
<input type="checkbox" ng-click="function()"
       id="custom_frequency{{$index}}" 
       name="custom_frequency" 
       class="weekday" / >
<label for="custom_frequency{{$index}}">{{day.name}}</label>
</div>

这是我的 HTML 部件，用于根据我的 object 显示复选框

Object 看起来像这样：

vm.days = [{
            name: i18nFilter('_custom_day_monday_'),
            value: 1
        }, {
            name: i18nFilter('_custom_day_tuesday_'),
            value: 2
        }, {
            name: i18nFilter('_custom_day_wednesday_'),
            value: 3
        }, {
            name: i18nFilter('_custom_day_thursday_'),
            value: 4
        }, {
            name: i18nFilter('_custom_day_friday_'),
            value: 5
        }, {
            name: i18nFilter('_custom_day_saturday_'),
            value: 7
        }, {
            name: i18nFilter('_custom_day_sunday_'),
            value: 7
        }]

所以我只需要检查是否选中了从 ng-repeat 创建的任何这些复选框。 知道怎么做吗？

Answer 1

使用 document.querySelector 获取所有复选框并使用数组some来检查它们是否被选中

 [...document.querySelectorAll('.weekday')].some(item => item.checked)

Answer 2

您可以使用:checked选择器：

document.querySelectorAll(".weekday:checked").length;     // 0 if none is checked

Answer 3

如果您修改复选框，如下所示

 <input type="checkbox" id="custom_frequency{{$index}}" ng-model="vm.selected[$index]" ng-init="vm.selected[$index]=false" name="custom_frequency" on class="weekday" / >

您将在 vm object 中获得一个名为 selected 的 scope 变量。 Object 默认有 7 个假值。 如果您检查了一周的一天，则 object 的相应索引将更新为真实值.....

然后您可以过滤此数组以获取使用 ts 文件中的以下代码检查的项目数

 var found = Object.keys($scope.vm.selected).filter(function(key) { return $scope.vm.selected[key] === true; }); console.log(found.length)