Question

我有一个项目的复选框列表。我想每次检查物品，能够显示物品的价格和销售税，每个值（价格和税）的小计总和，并总计总成本。这是我到目前为止所做的（代码是我在网上找到的脚本的混合）：

<html>
<head>
<title>List</title>

<SCRIPT>
function UpdateCost() {
  var sum = 0;
  var gn, elem;
    for (i=1; i<3; i++) {

                gn = 'item'+i;
                elem = document.getElementById(gn);
                if (elem.checked == true) { sum += Number(elem.value); 
            }

        }
    document.getElementById('totalcost').value = sum.toFixed(2);
}
</SCRIPT> 

</head>
<body>
<FORM  >

<table border="1px" align="center">

<tr>
<td>List of Items
<td>Price
<td>Tax
</tr>

<tr>
<td><input type="checkbox" id='item1'  value="10.00"   onclick="UpdateCost()">item1
<td><INPUT TYPE="text"     id='price1' SIZE=5 value="">
<td><INPUT TYPE="text"     id='tax1' SIZE=5 value="">
</tr>


<tr>
<td><input type="checkbox" id='item2'  value="15.00"   onclick="UpdateCost()">item2
<td><INPUT TYPE="text"     id='price2' SIZE=5 value="">
<td><INPUT TYPE="text"     id='tax2' SIZE=5 value="">
</tr>

<TR>
<TD>Subtotals
<TD><INPUT TYPE="text" id="subtotal1" value="" SIZE=5>
<TD><INPUT TYPE="text" id="subtotal2" value="" SIZE=5>
</TR>


<tr>
<td>Total Cost:
<td><input type="text" id="totalcost" value="" SIZE=5>
<td><input type="reset" value="Reset">
</tr>

</table>


</FORM>

</body>
</html>

Answer 1

这是一个使用Knockout.js的工作实现。小提琴在这里：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 website。有许多有用的演示和教程。

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

项目复选框列表的总和

1 个答案:

的JavaScript

HTML