Изменение значения HTML в зависимости от флажков

Question

Я хочу создать прайс-лист для моего веб-сайта по графическому дизайну.

В принципе, у меня есть базовая цена в размере 150 долларов США для дизайна веб-сайта, и я хочу создать модуль, в котором пользователи могут проверять необязательные поля, чтобы добавить к цене. Например:

Цена начинается от $ 150, что находится в общей сумме в нижней части страницы. Пользователь может проверить вариант обновления, оценивая что-то, я буду использовать $ 20 для примера. Когда флажок установлен, общее число в нижней части страницы увеличивается до 170 долларов.

Я работаю с программированием довольно много, но не много JavaScript. Я никогда раньше ничего подобного не делал, и желаю, чтобы все это было на стороне клиента. С чего начать?

EDIT -

Вот некоторые HTML основной страницы у меня есть. После проверки флажка его значение должно быть добавлено к значению того, что находится в текстовой области.

http://pastie.org/private/avwkmaqztfqxma5lg6y8q

Answer 1

Самый простой способ, я могу видеть, чтобы сделать это:

• Установите базовую цену в качестве переменной в JavaScript
• вызова функции, когда флажок установлен или снят
• Добавить или вычесть значение галочки от базовой цены

Я добавил две вещи к вашему примеру кода. Во-первых, для каждого флажка я добавил функцию onchange, которую мы будем называть update(). Во-вторых, я дал «Total» id общей суммы.

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> 

The JavaScript довольно прямо вперед. Установите базовую цену (running_total) и добавьте или вычтите значение флажка из run_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

Это очень SimPE проблема (без обид). Что я хотел бы сделать, это поставить цену в значение CheckBox

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

Затем, когда она нажата, используйте это значение для расчета общего:

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

Вы должны сделать некоторые незначительные строки манипуляции и использования parseInt, но я уверен, что вы можете это понять.