javascript - 根据复选框更改 HTML 值

Question

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

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

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

我经常与编程打交道，但 JavaScript 不多。我以前从来没有做过这样的事情，并希望它都是客户端的。我应该从哪里开始？

编辑 -

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

http://pastie.org/private/avwkmaqztfqxma5lg6y8q

Answer 1

我认为最简单的方法是:

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

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

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/