根据复选框更改HTML值

我想为我的图形设计网站创建价目表。根据复选框更改HTML值

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

价格从$ 150开始，总共位于页面底部。用户可以检查升级费用的选项，我将使用20美元作为示例。一旦这个盒子被选中，页面底部的总数就会增加到170美元。

我在编程方面工作很多，但没有太多的JavaScript。我从来没有做过这样的事情，并希望它都是客户端。我应该从哪里开始？

编辑 -

这里是基本的网页我有一些HTML。在检查复选框后，它的值应该被添加到文本区域中的值。

http://pastie.org/private/avwkmaqztfqxma5lg6y8q

来源

2013-02-09 LegacyP7

这将是一个更容易帮助，如果你提供一些或你的HTML。 – Carcamano 2013-02-09 21:17:50

最简单的方法是：

设置你的基本价格为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/

来源

2013-02-10 00:39:47 tovin

完美。正是我在找的东西。非常感谢！ – LegacyP7 2013-02-10 16:34:29

这是一个非常simpe问题（没有进攻）。我会做的就是把价格的复选框值

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

然后，点击后，会使用这个值来计算总：

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

你必须做一些轻微的字符串操作和使用parseInt，但我相信你可以弄清楚。我可以看到这样做

来源

2013-02-09 21:20:33

这并没有真正的帮助：/ – LegacyP7 2013-02-09 22:33:37

@ LegacyP7你坚持什么？ – 2013-02-09 22:44:16

根据复选框更改HTML值

回答

相关问题