3

190 + 150特定のコードからのコストを追加して、別の に表示するにdivはどうすればよいdivですか?

私はすでに変数を作成し、それぞれのコストを保存しています。私の目標は、ユーザーがチェックボックスをオンにしたとき (約 10 個のチェックボックスがあります)、それぞれの価格が合計に追加され、チェックを外すと自動的に差し引かれることです。どうすればいいのか、どなたかヒントをいただけないでしょうか。 

$(document).ready(function() {
    //var pdf=$('#result').html(" -PDF Document");

    $('#1').click(function() {
        //var row = $(this);
        if (($(this).attr('checked')) == 'checked')
            $('#result').append("-PDF Document <html><span style=float:right>$190</span></html>");
        else
            $('#result').text("");
    });

    $('#2').click(function(){
        if (($(this).attr('checked')) == 'checked')
            $('#result2').append("-Video <html><span style=float:right>$150</span></html> ");
        else
            $('#result2').text("");
    });
});
4

4 に答える 4

3

このフィドルを見てください..あなたがいくつかのアイデアを得ることができるように....それは私があなたが求めたと思うことをします..

JavaScript

$("input:checkbox").change(function(){
  var $val=$(this).val();
  var total=$('#total').html();
  if($(this).is(':checked')){
    var finaltotal=parseInt($val) + parseInt(total)
  }else{
    var finaltotal=parseInt(total) - $val 
  }

      $('#total').html(finaltotal);
})

http://jsfiddle.net/5Azzr/1/

更新しました

あなたの例で..

http://jsfiddle.net/BA5rX/4/

注：合計値を含むdivを作成しました...

<div id="total">1000</div>

最新のアップデート

http://jsfiddle.net/5YZp5/2/

于 2012-12-19T12:25:45.333 に答える
1

次のコードを使用します。

JS:

function refreshPrices() {
    var currentTotalValue = 0;
    $("#results div").each(function() {
        if (!isNaN(parseInt($(this).find("span").text().substring(1)))) {
            currentTotalValue += parseInt($(this).find("span").text().substring(1));
        }
    });
    $("#totalValue").text("$" + currentTotalValue)
}

これを使用するには、すべての " result*" コンテナーを 1 つのコンテナーに格納します。これにより、出力を jQuery で反復処理しやすくなります ["#results"すべての " " コンテナーの結果を取得するために必要なメジャー セレクター ( ) は1 つだけであるためresult*]。

<div id="results">
<div id="result">
</div>
<div id="result2">
</div>
</div>

また、ユーザーがチェックボックスを操作するたびrefreshPrices()に呼び出す必要があります。

HTML:

<table>
<tr>
                        <td style="width: 13px">
                            <input id="1" type="checkbox" name="" onClick="" />

                        </td>
                        <td>
                            <h4>PDF Document</h4>
                            <p>
                                Already have your own menu or flyer? Include it in your App
                            </p>
                        </td>
                        <td class="cost" id="pdf-cost">£99.99 per document</td>
                    </tr>

                    <tr>
                        <td style="width: 13px">
                            <input id="2" type="checkbox"/>
                        </td>
                        <td>
                            <h4>Video</h4>
                            <p>
                                If you've already got videos on your website, these can be included within your App too.
                            </p>
                        </td>
                        <td class="cost">£149.99 per video</td>
</tr>
<table>
<br>
<br>
<div id="totalValu">Total Value: <span id="totalValue">$0</span></div>
<div id="results">
<div id="result">
</div>
<div id="result2">
</div>
</div>

JS:

$(document).ready(function() {

    $('#1').click(function() {
        //var row = $(this);
        if (($(this).attr('checked')) == 'checked') {
            $('#result').append("-PDF Document <html><span style=float:right>$190</span></html>");
        }
        else {
            $('#result').text("");
        }
        refreshPrices();
    });

    $('#2').click(function() {
        if (($(this).attr('checked')) == 'checked') {
            $('#result2').append("-Video <html><span style=float:right>$150</span></html> ");
        }
        else {
            $('#result2').text("");
        }
        refreshPrices()
    });
});​

JSFiddle: http://jsfiddle.net/BA5rX/7/

于 2012-12-19T12:52:28.953 に答える
0

これがあなたのhtmlに基づく私の提案です-無効なIDを修正し、代わりにクラスを追加しました。また、ページがリロードされ、チェックボックスがクリアされていない場合に備えて、オンロードも計算します。表のセルから先頭のポンド文字を引いた値を取得します

デモ

function calcTotal() {
  var total = 0;
  $(".check:checked").each(function() {
    total += parseFloat($(this).parent().siblings(".cost").text().substring(1));
  });            
  $("#totalDiv").html("£"+total.toFixed(2))

}

$(function() {
    calcTotal(); 
    $(".check").on("click",function() {
       calcTotal(); 
    });
});​
于 2012-12-19T12:32:52.450 に答える
0

HTML を修正して、価格を含むclass各パラメータcheckboxとdata-priceパラメータを追加できる場合は、jQuery を次のように非常に単純にすることができます。

$(".checkbox").change(function() {
    var total = 0;
    $(".checkbox:checked").each(function() {
        total += parseFloat($(this).data('price'));
    });
    $("#total").html(total.toFixed(2));
});

フィドルの例

于 2012-12-19T12:35:26.393 に答える