css选中所有标题,CSS-选中我的表格中的所有复选框

您需要具有一个遍历Things集合中所有项目并将IsSelected设置为true或false的函数.

然后,您可以在“主”复选框上单击以绑定此功能：

一个示例实现如下所示：

self.selectAll = function(data, event)

{

ko.utils.arrayForEach(self.model.Things (), function(item){

if (event.target.checked)

item.IsSelected(true);

else

item.IsSelected(false);

});

return true; //to trigger the browser default bahaviour

}

或者,您可以在视图模型上具有IsAllSelected属性,并使用选中的绑定而不是单击,并在IsAllSelected的change事件内执行选择逻辑(或者您也可以使用可写的可计算observable).

我认为,如果您想支持以下方案,最终您将需要这样的东西：全选->手动取消选中每一行应取消选中标题行等.

Another demo使用IsAllSelected计算属性

self.IsAllSelected = ko.computed({

read: function () {

var isAllSelected = true;

ko.utils.arrayForEach(self.model.Things(), function (item) {

isAllSelected = isAllSelected && item.IsSelected()

});

return isAllSelected;

},

write: function (value) {

ko.utils.arrayForEach(self.model.Things(), function (item) {

if (value) item.IsSelected(true);

else item.IsSelected(false);

});

}

});