项目的复选框列表的总和

下面是一个使用Knockout.js的工作实现。fiddle在这里：http://jsfiddle.net/pJ5Z7/.

ViewModel和Item函数定义了您的数据结构和逻辑。视图模型中属性的绑定是在HTML中完成的，Knockout将动态更新这些属性。这是双向的：我留下了价格值作为输入来说明这一点。如果您检查一个项目并更改其价格，您将看到该更改反映在模型和视图的其余部分中（在输入失去焦点后）。

这种方法允许清晰地分离关注点和更易于维护的代码。Knockout和类似库中的声明性绑定也可以帮助您避免手动操作DOM。

如果你想更改数据集，你所要做的就是在初始化代码中添加或删除项目：

var items = [
    new Item('item1', 10.00),
    new Item('item2', 15.00)
];

使用旧方法，您将不得不更新DOM以及所有逻辑。这些数据甚至可以从web服务或其他任何地方动态加载。

我还清理了一些标记，并将input元素的大小定义移到了CSS中。在那里定义样式是更好的做法。

如果你想了解更多，只需访问Knockout网站。这里有许多有用的演示和教程。

JavaScript

//Main viewModel
function ViewModel(items) {
    var self = this;
    self.items = ko.observableArray(items);
    self.priceSubtotal = ko.computed(function() {
        var i = 0;
        var items = self.items();
        var sum = 0;
        for(i = 0; i < items.length; i++) {
            //Only add up selected items
            items[i].selected() && (sum += parseFloat(items[i].price()));
        }
        return sum.toFixed(2);
    });
    self.taxSubtotal = ko.computed(function() {
        var i = 0;
        var items = self.items();
        var sum = 0;
        for(i = 0; i < items.length; i++) {
            //Only add up selected items
            items[i].selected() && (sum += parseFloat(items[i].taxAmount()));
        }
        return sum.toFixed(2);
    });
    self.totalCost = ko.computed(function() {
        return (parseFloat(self.priceSubtotal()) + parseFloat(self.taxSubtotal())).toFixed(2);
    });
    //Functions
    self.reset = function() {
        var i = 0;
        var items = self.items();
        var sum = 0;
        for(i = 0; i < items.length; i++) {
            items[i].selected(false);
        }
    };
}
//Individual items
function Item(name, price) {
    var self = this;
    self.name = ko.observable(name);
    self.price = ko.observable(price);
    self.selected = ko.observable(false);
    self.taxRate = ko.observable(0.06);
    self.taxAmount = ko.computed(function() {
        return (self.price() * self.taxRate()).toFixed(2);
    });
}
//Initialization with data- this could come from anywhere
var items = [
    new Item('item1', 10.00),
    new Item('item2', 15.00)
];
//Apply the bindings
ko.applyBindings(new ViewModel(items));

HTML

<form>
    <table border="1px" align="center">
        <tr>
            <td>List of Items</td>
            <td>Price</td>
            <td>Tax</td>
        </tr>
        <!-- ko foreach: items -->
            <tr>
                <td>
                    <input type="checkbox" data-bind="checked: selected" />
                    <span data-bind="text: name"></span>
                </td>
                <td>
                    <input type="text" data-bind="value: price"/>
                </td>
                <td>
                    <span data-bind="text: selected() ? taxAmount() : ''"></span>
                </td>
            </tr>
        <!-- /ko -->
        <tr>
            <td>Subtotals</td>
            <td>
                <span data-bind="text: priceSubtotal"></span>
            </td>
            <td>
                <span data-bind="text: taxSubtotal"></span>
            </td>
        </tr>
        <tr>
            <td>Total Cost:</td>
            <td>
                <span data-bind="text: totalCost"></span>
            </td>
            <td>
                <input type="button" value="Reset" data-bind="click: reset" />
            </td>
        </tr>
    </table>
</form>