根据复选框更改HTML值
我想为我的图形设计网站创建价目表。根据复选框更改HTML值
基本上,我的网站设计的基本价格为150美元,我想创建一个模块,用户可以在其中检查可选框以增加价格。例如:
价格从$ 150开始,总共位于页面底部。用户可以检查升级费用的选项,我将使用20美元作为示例。一旦这个盒子被选中,页面底部的总数就会增加到170美元。
我在编程方面工作很多,但没有太多的JavaScript。我从来没有做过这样的事情,并希望它都是客户端。我应该从哪里开始?
编辑 -
这里是基本的网页我有一些HTML。在检查复选框后,它的值应该被添加到文本区域中的值。
最简单的方法是:
- 设置你的基本价格为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/
完美。正是我在找的东西。 非常感谢! – 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
,但我相信你可以弄清楚。我可以看到这样做
这并没有真正的帮助:/ – LegacyP7 2013-02-09 22:33:37
@ LegacyP7你坚持什么? – 2013-02-09 22:44:16
这将是一个更容易帮助,如果你提供一些或你的HTML。 – Carcamano 2013-02-09 21:17:50