获取选中复选框列的行 - 淘汰赛JS

Posted 2023-03-27

【中文标题】获取选中复选框列的行 - 淘汰赛JS

【英文标题】：Get row in which checkbox column is selected - knockout JS

【发布时间】：2018-02-18 05:50:08

【问题描述】：

我对 Knockout JS 完全陌生。我有一个表格，其中一列是输入类型复选框。 在 html 表格的末尾，我有一个按钮作为“添加”。 现在我要做的是单击“添加”按钮，我应该能够获取选中复选框的所有行。

HTML

<table>
        <thead>
            <tr>
                <th>Add Data</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: SearchResult">
            <tr>
                <td data-bind="text: Name"></td>
                <td><input type="checkbox" class="" data-bind="checked: selectedArray"/></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td><button type="button" id="addButton" data-bind="click: AddSelection">Add</button></td>
            </tr>
        </tfoot>
    </table>

现在谁能告诉我如何获取选中复选框列的所有行。 我已经经历过了，但这对我不起作用。

send information from multiple checkbox to array Knockout js

小提琴供参考 http://jsfiddle.net/smsharma/u9ts4uvf/

【问题讨论】：

用你尝试过的东西发布你的javascript代码。此外，您需要提及究竟是什么不起作用。表正在加载吗？添加点击事件是否有效？

是的，表格已加载所有数据，并且访问点击也可以正常工作。问题是我不知道如何编写代码来获取带有选中复选框的行。

查看Knockout documentation 并了解observables 的含义。然后了解foreach 和checked 绑定。这是一个基本的实现。网上有数百个例子。一旦你写了一些代码并且你被困在某个地方，你可以把它贴在这里。 SO 不是代码编写服务。

添加小提琴供参考

【参考方案1】：

这是更新后的小提琴：http://jsfiddle.net/u9ts4uvf/1/

您可以创建一个 addItem 函数，该函数创建一个新项目，并将其添加到数组availableItems：

self.addItem = function() 
    var item = new BookItem(1, 'Lorem Ipsum', '$0.99');
    item.Selected(true);
    self.availableItems.push(item);
;

但您还需要为复选框添加checked 绑定，以确保当Selected 为BookItem 设置为true 时它们被选中：

<input type="checkbox" data-bind="value: id(), click: $root.toggleAssociation, checked: Selected" />

【讨论】：

在我的模型中，我没有“选择”字段。没有那个我可以做任何选择。

您在BookItem 中确实有self.Selected = ko.observable(false);。这就是我所指的。

实际上，我是从服务中获取数据，因此没有。从服务中，我直接将数据获取到我的 ViewModel。我正在获取一系列书籍。还有其他方法吗？

在BookItem 中定义可观察对象是正确的方法。因此，当您获得一组项目时，例如 var data = [id:1,name:'abc',price:'0.99$']，您可以使用类似 data.forEach(function(item) var bookItem = new BookItem(item.id, item.name, item.price); self.availableItems.push(item) ); 的方式将这些项目转换为 BookItem 的对象。如果仍然不清楚，您可以使用一些示例更新您的小提琴数据？

谢谢伙计。这正是我所需要的。