Question

我有以下代码的DOM结构：

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

使用knockout.js，当我选择单个复选框时，我希望能够突出显示仅具有背景颜色的父行。现在，我设法实现的代码选择所有复选框并突出显示所有行，如图here in this fiddle所示。

值得注意的是，我拥有的行数是动态的，可能非常大，因此需要一个可扩展的解决方案。我已经尝试理解observableArrays的概念，但我并没有走得太远。

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

Answer 1

使用observableArray（fiddle link）：

查看此解决方案

我创建了一个构造函数 Checkbox方法，可以创建复选框项目。
请注意，每个复选框都有可观察，以便检测选择项目时。
我还有一个observableArray填充了复选框对象。
然后我只需要一个foreach 绑定来呈现我在数组中的所有复选框。
在foreach绑定内部我已添加多个绑定以显示标签，当选中检测时如果已被选中，则会被选中并突出显示。

<强> 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>

<强> CSS

.selected {
    background-color: yellow;
}

<强> JS

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)
})

它是如此可扩展，因为您只需要向new Checkbox()添加observableArray。

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

1 个答案: