如果选中一个复选框，则选中所有复选框无效

Checking all checkboxes if one checkbox gets checked is not working

本文关键字：复选框 无效 如果 一个      更新时间：2023-09-26

我的问题是，当我单击"全选"复选框时，其他复选框没有选中：它们保持原样。显示布尔值也不是一个函数：Js在write:item中出错。IsSelected（值）

EF-位置绑定

model.Locations = this.Locations.Where(x => selectedLocationIds.Contains(x.Id)).ToViewModel();

===================

HTML

 <p>
        <input type="checkbox" data-bind="checked: allSelect"/> All
    <table>
        <tbody data-bind="foreach: Locations">
            <td>
                <input type="checkbox" data-bind="checked: IsSelected">
            </td>
            <td>
                <p data-bind="text: Name"></p>
            </td>
        </tbody>
    </table>
<script src="~/Scripts/Entities/Component.js"></script>
    <script>
        //template pattern
        var model = @Html.Raw(ViewBag.Model);
            var listViewModel = new ListViewModel(model);
            listViewModel.selectedPeople = ko.observableArray()

            ko.applyBindings(listViewModel);

    </script>

还让我知道如何获得Id-value以在Json中将Id作为Data传递。

function ListViewModel(model) {
var self = this;
self.Locations = ko.observableArray(model.Locations);
var Location = function (label) {
    var self = this;
    self.Label = label;
    self.IsSelected = ko.observable();
};
//self.Locations = ko.observableArray();
self.allSelect = ko.computed({
    read: function () {
        var allSelected = true;
        ko.utils.arrayForEach(self.Locations() , function (item) {
            if (!item.IsSelected()) {
                allSelected = false;
            }
        });
        return allSelected; //to trigger the browser default bahaviour
    },
    write: function (value) {
        ko.utils.arrayForEach(self.Locations(), function (item) {
            item.IsSelected(value);
        });
    }
});

}

您的IsSelected需要是可观察的，才能更新屏幕。我还添加了self.selectedId来跟踪所选的id。

var Location = function(location) {
    var self = this;
    self.Id = location.Id;
    self.Label = location.Name;
    self.IsSelected = ko.observable(location.IsSelected);
}
self.selectedIds = [];
self.allItemsSelected = ko.computed({
    read: function () {
        var allSelected = true;
        self.selectedIds = [];
        ko.utils.arrayForEach(self.Locations(), function (item) {
            if (!item.IsSelected()) {
                allSelected = false;    
            }
            else {
                self.selectedIds.push(item.Id);
            }
        });
        console.debug('selectedIds: ' + self.selectedIds);
        return allSelected; //to trigger the browser default bahaviour
    },
    write: function (value) {
        ko.utils.arrayForEach(self.Locations(), function (item)
        {
            item.IsSelected(value);
        });
    }
});

您会得到错误"boolean不是函数"，因为您没有为javascript位置中的每个位置使用新的Location（Location）。

var mappedLocations = $.map(locations, function(location) 
                            { return new Location(location) });
self.Locations = ko.observableArray(locations);

http://jsfiddle.net/Wk7dr/9/

相关文章：