Question

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

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

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

我的编程工作非常多，但JavaScript并不多。我之前从未做过这样的事情，并希望所有人都是客户端。我应该从哪里开始？

编辑 -

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

http://pastie.org/private/avwkmaqztfqxma5lg6y8q

Answer 1

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

在JavaScript中将基本价格设置为变量
选中或取消选中复选框时调用函数
从基本价格

我在示例代码中添加了两件事。首先，对于每个复选框，我添加了一个onchange函数，我们将调用update（）。其次，我给了“总计”一个总数。

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/

Answer 2

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

中

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

然后，单击它时，使用此值计算总数：

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

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

根据复选框更改HTML值

2 个答案: