2

グラフィック デザイン Web サイトの価格表を作成したいと考えています。

基本的に、ウェブサイトのデザインの基本価格は $150 で、ユーザーがオプションのボックスをチェックして価格に追加できるモジュールを作成したいと考えています。例えば：

価格は $150 からで、合計はページの下部にあります。ユーザーは、費用がかかるオプションのアップグレードを確認できます。この例では 20 ドルを使用します。ボックスがチェックされると、ページの下部にある合計は $170 になります。

私はプログラミングをかなり多く扱っていますが、JavaScript はあまり使用していません。私はこれまでにこのようなことをしたことがなく、すべてクライアント側にしたいと考えています。どこから始めればよいですか？

編集 -

これが私が持っている基本的なページのHTMLです。チェックボックスをオンにすると、その値がテキスト領域の値に追加されます。

http://pastie.org/private/avwkmaqztfqxma5lg6y8q

4

2 に答える 2

1

これを行う最も簡単な方法は次のとおりです。

  • JavaScript で基本価格を変数として設定する
  • チェックボックスがチェックされているかチェックされていないときに関数を呼び出す
  • チェックボックスの値を基準価格に加算または減算します

サンプル コードに 2 つのことを追加しました。まず、チェックボックスごとに、update() を呼び出す onchange 関数を追加しました。次に、"Total" に 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>

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-10T00:39:47.093 に答える
0

これは非常に単純な問題です (問題はありません)。私がすることは、価格をチェックボックスの値に入れることです

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

次に、クリックすると、この値を使用して合計が計算されます。

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

ちょっとした文字列操作を行って を使用するparseInt必要がありますが、これは理解できるはずです。

于 2013-02-09T21:20:33.497 に答える