根據複選框更改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值

回答

相關問題