2

我想为我的图形设计网站创建一个价目表。

基本上，我的网站设计基本价格为 150 美元，我想创建一个模块，用户可以在其中选中可选框，以增加价格。例如：

价格从 150 美元起，总计在页面底部。用户可以检查选项升级成本，我将使用 20 美元作为示例。选中该框后，页面底部的总金额将升至 170 美元。

我经常从事编程工作，但很少使用 JavaScript。我以前从来没有做过这样的事情，并希望它都是客户端的。我应该从哪里开始？

编辑 -

这是我拥有的基本页面的一些 HTML。选中复选框后，应将其值添加到文本区域中的值中。

http://pastie.org/private/avwkmaqztfqxma5lg6y8q

4

2 回答 2

1

我能看到的最简单的方法是：

  • 在 JavaScript 中将基本价格设置为变量
  • 选中或取消选中复选框时调用函数
  • 从基本价格中添加或减去复选框的值

我在您的示例代码中添加了两件事。首先，对于每个复选框，我添加了一个 onchange 函数，我们将调用 update()。其次，我给“Total”一个total id。

HTML：

Piecemaker - 
<input name="piecemaker" type="checkbox" value="20" onchange="update(this);">
<br>
Network Bar - 
<input name="netbar" type="checkbox" value="15" onchange="update(this);">
<br>
10 Tags - 
<input name="tags" type="checkbox" value="5" onchange="update(this);">
<br>
Shopping System - 
<input name="shop" type="checkbox" value="20" onchange="update(this);">
<br>
<br>
Total: <input id='total' name="total" type="text" value="$150" readonly>

JavaScript 非常简单。设置基本价格 (running_total)，然后从 running_total 中添加或减去复选框的值。

JavaScript：

var running_total = 150;

function update(feature) {
    // Check
    if(feature.checked == true){
        // Add value to running_total
        running_total += parseInt(feature.value);
        document.getElementById('total').value = '$' + running_total;
    }
    // Uncheck
    if(feature.checked == false){
        // Subtract value from running_total
        running_total -= parseInt(feature.value);
        document.getElementById('total').value = '$' + running_total;
    }
}

这是 jsfiddle.net 上一个工作示例的链接：http: //jsfiddle.net/dnA7q/1/

于 2013-02-10T00:39:47.093 回答
0

这是一个非常简单的问题（没有冒犯）。我要做的是将价格放在复选框值中

<input type=checkbox value=20 id=feature>

然后，当它被点击时，使用这个值来计算总数：

document.gelElementById('feature').addEventListener('click', function () {
    document.getElementById('total') += this.value;
});

你必须做一些小的字符串操作和使用parseInt，但我相信你能解决这个问题。

于 2013-02-09T21:20:33.497 回答