Checkbox 选中Knockout.js复选框并单击事件

我们正在尝试实现具有以下功能的复选框和列表：

• 如果数组中有项目，单击该复选框将清除该数组，如果没有，则添加一个新项目
• 单击“删除”按钮时从数组中删除项目，一旦删除最后一个项目，复选框将自动取消选中

我遇到的问题是，如果单击删除每个数组项，然后单击复选框添加一个空白条目，我希望再次选中该复选框（根据选中的可观察项），但它不是吗

我有以下代码：

以前的姓氏？
去除
var myViewModelExample=函数（）{
var self=这个；
self.previousnames=ko.observearray（['names1'，'names2'，'names3']）；
self.removePreviousName=函数（姓氏）{
self.previousnames.remove（姓氏）；
};
self.previousnames\u Click=函数（）{
if（self.previousNames（）.length==0）{
self.previousnames.push（“”）；
}
否则{
self.previousnames.removeAll（）；
}
艾利特（2）
}
}
applyBindings（新的myViewModelExample（））；

如果您同时使用

单击

和

选中

，则需要

从单击处理程序返回true

，在本例中选中复选框：

self.PreviousSurnames_Click = function () {
    if (self.PreviousSurnames().length === 0) {
        self.PreviousSurnames.push('');
    }
    else {
        self.PreviousSurnames.removeAll();
    }
    return true;
}

---

演示。

您需要使用计算机来监控可观测阵列的长度。这样，当长度达到零时，您可以自动对其作出反应

    self.surnames = ko.computed(function() {
        var checked = true;
        if (self.PreviousSurnames().length === 0) {
            self.PreviousSurnames.push('');
            checked = false;
        }            
        return checked;
    });

现在，当所有的名称都被清除时，您将拥有空白文本框。如果更新复选框上的绑定，它也会正常工作

<input type="checkbox" data-bind="checked: surnames, click: PreviousSurnames_Click" />Previous Surname(s)?

以前的姓氏？

---

计算结果的意义是什么？在您的示例中，代码在计算中重复，

previousnames\u单击

，您还需要添加

返回true

在最近一次编辑中使复选框“起作用”？计算的点是当数组中没有剩余项时自动作出反应。代码是重复的，因为它是一把小提琴。这个例子的重构是一个简单的过程。但是，我更新了它以删除重复的代码。在您的示例中，当清除所有项目时，文本框不会出现。

<input type="checkbox" data-bind="checked: surnames, click: PreviousSurnames_Click" />Previous Surname(s)?