Javascript 如何在没有foreach的情况下使用knockout显示所选复选框的值？

给定一个复选框列表，其值等于一个人的姓名，我试图将它们添加到淘汰表中。当有人单击复选框时，我如何将一个人添加到observableArray

对于HTML，我有以下内容：

<ul>
    <li>
        <div>
            <input type="checkbox" value="John" data-bind="clicked: addPerson"><span >John</span>

            <input type="checkbox" value="Allen" data-bind="clicked: addPerson"><span>Allen</span>

        </div>
    </li>
</ul>
<hr/>
<div data-bind="text: ko.toJSON(selectedPeople)"></div>

我本以为当我点击这些名字时，它们会被打印出来。我做错了什么

分叉并更新。您可以使用

computed

来解决您的问题。此外，您在应用绑定和复选框绑定时犯了错误（您应该使用

checked

binding，在这种情况下没有理由创建附加函数）

HTML:

<ul>
    <li>
        <div>
            <input type="checkbox" value="John" data-bind="checked: selectedPeople"/>
            <span>John</span>
            <input type="checkbox" value="Allen" data-bind="checked: selectedPeople"/>
            <span>Allen</span>
        </div>
    </li>
</ul>
<hr/>
<div data-bind="text: displayedPeople"></div>

<ul>
    <li>
        <div>
            <input type="checkbox" value="John" data-bind="checked: selectedPeople"/>
            <span>John</span>
            <input type="checkbox" value="Allen" data-bind="checked: selectedPeople"/>
            <span>Allen</span>
        </div>
    </li>
</ul>
<hr/>
<div data-bind="text: displayedPeople"></div>

var viewModel= function () {
    var self = this;
    self.selectedPeople = ko.observableArray();
    self.displayedPeople = ko.computed(function() {
        var str = "";
        ko.utils.arrayForEach(self.selectedPeople(), function(item) {
            str += item + " ";
        });
        return str;
    });
};

ko.applyBindings(new viewModel());