Javascript 如何从Knockout.js中的复选框列表中仅选择一个复选框

我有以下代码的DOM结构：

<tr>
    <td><label><input type="checkbox"></label></td>
</tr>
<tr>
    <td><label><input type="checkbox"></label></td>
</tr>
... etc

... 等

使用knockout.js，当我选中一个复选框时，我希望能够使用背景色仅高亮显示父行。现在，我设法实现的代码选中所有复选框并高亮显示所有行，如图所示

值得注意的是，我拥有的行数是动态的，可能非常大，因此需要一个可伸缩的解决方案。我已经试着去理解这个概念，但我还没走多远

---

如何使用Knockout实现上述逻辑？谢谢

使用

observableArray查看此解决方案

（）：

我创建了一个构造函数

复选框

方法，用于创建复选框项

注意：每个复选框都有一个可观察的，用于检测何时选择了项目

我还有一个

observearray

，里面填充了复选框对象

然后我只需要一个

foreach

绑定来呈现数组中的所有复选框

在

foreach

bind中，我添加了几个绑定，以显示标签，在选中复选框时检测，如果选中，则突出显示它

HTML

<div data-bind="foreach: checkboxes">
    <div data-bind="css: {'selected': isSelected}">
        <label>
            <input type="checkbox" data-bind="checked: isSelected"/>
            <span data-bind="text: label"></span>
        </label>
    </div>    
</div>

JS

.selected {
    background-color: yellow;
}

var Checkbox = function(label){
    this.isSelected = ko.observable(false);
    this.label = label;
};

var checkboxes = [new Checkbox('Item 1'), new Checkbox('Item 2'), new Checkbox('Item 3')];

ko.applyBindings({
    checkboxes: ko.observableArray(checkboxes)
})

---

它的可伸缩性很强，因为您只需在

ObservalArray

中添加一个

新复选框（）

，

一种简单（但不一定容易伸缩）的方法是使用单独的可观测项来确定何时选中单个复选框。看看你的提琴例子。@hunch\u hunch，是的，这可能不是最有效的解决方案，因为行数是动态的，可能会达到数百行。你会想使用数组版本的。@Origineil，我看过那个页面，我很难理解它。谢谢。好吧，这是根据你原来的小提琴改编的。如果不了解更多关于要迭代以创建元素的对象的实际结构，就很难为应用样式提供更优雅的布尔检查。