如何創建 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)