挖空.js“全选”复选框

Knockout.js "select all" checkboxes

本文关键字：复选框 全选 js 挖空      更新时间：2023-09-26

我刚刚开始玩Knockout.js，看起来真的很酷。我有一个网格。此网格有一列，顶部有一个复选框，用于"选择所有"元素以及取消选择。标准网格行为。

这是我到目前为止的代码：

Javascript： 

// Define a "banner" class
function banner(inventory, name, artType, artSize) {
    return {
        isSelected : ko.observable(false),
        inventory : ko.observable(inventory),
        name : ko.observable(name),
        artType : ko.observable(artType),
        artSize : ko.observable(artSize)
    };
}
var viewModel = {
    banners : ko.observableArray([new banner("network", "Banner #1"), new banner("oo", "Banner #2")]),
    addBanner : function() {
        this.banners.push(new banner("network", "Banner"));
    },
    selectAll : function() {
        this.banners.isSelected(true)
    }       
};
ko.applyBindings(viewModel);

我将"selectAll"事件绑定到复选框，如下所示：

<th><input data-bind="click: selectAll" type="checkbox" /></th>

对于我列表中的每个横幅，他们的复选框如下所示：

<td><input data-bind="checked: isSelected" type="checkbox" /></td>

由于某种原因，我的 selectAll 函数无法正常工作。我对这个OO javascript编程范式相当陌生，所以我可能在这里做了一些公然错误的事情。

谢谢！

在这种情况下，

横幅是一个数组，因此您需要访问数组中的每个项目并更新各个isSelected属性。

像这样：

ko.utils.arrayForEach(this.banners(), function(banner) {
   banner.isSelected(true);
});

下面的链接中有一个更实用的响应。当取消选中其他复选框时，它会取消选择"全选"框：

挖空选中/取消选中所有组合框

相关文章：