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

How to select only a single checkbox from a list of checkboxes in Knockout.js

本文关键字：复选框 选择 一个 列表 js Knockout      更新时间：2023-09-26

我有一个以下代码的 DOM 结构：

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

使用 KNOCKOUT.js，当我选择单个复选框时，我希望能够仅突出显示具有背景色的父行。现在，我设法实现的代码会选择所有复选框并突出显示所有行，如本小提琴所示。

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

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

使用observableArray（小提琴链接）查看此解决方案：

  1. 我创建了一个构造函数Checkbox方法，该方法创建复选框项。
  2. 请注意，每个复选框都有一个可观察量，用于检测何时选择项目。
  3. 我还有一个装满复选框对象的observableArray。
  4. 然后，我只需要一个foreach绑定来呈现数组中的所有复选框。
  5. 在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)
})

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

相关文章：