0

この関数は、ラジオ ボタンで .hasVal クラスを使用した場合に、最後にクリックした値の小計のみを計算します。何か案は？

更新: jsfiddle リンクは次のとおりです: http://jsfiddle.net/SUKsM/4/

基本的に、私の HTML フォームには値を持つフィールドセットがあります。

<fieldset id="breadOptions" class="hidden">
    <legend>Select one</legend>
    <input type="radio" name="breadType" id="breadWhite" class="hasVal" value=".5,260" /> White (260 calories)<br />
    <input type="radio" name="breadType" id="breadWheat" class="hasVal" value=".5,360" /> Wheat (360 calories)<br />
</fieldset>​

スクリプトは次のとおりです。

$(function () {
    var basePrice = 3;
    var totalCal = 0;
    var taxRate = .07;
    $('#total').text(basePrice.toFixed(2));
    $('#sub').text(basePrice.toFixed(2));
    $('#cal').text(totalCal);
    $('#tax').text((taxRate * 100).toFixed(2));

    $('.hasVal').click(function () {
        var price = 0;
        var totalCal = 0;
        var tar = event.currentTarget;
        var optArr = tar.value.split(','); //cost,calorie

        price += parseFloat(optArr[0]);
        totalCal += parseInt(optArr[1]);

        $(':checked').each(function () {
            totalPrice = (price + basePrice);
        });

        $('#sub').text(totalPrice.toFixed(2));
        $('#cal').text(totalCal);

        totalTax = totalPrice + (totalPrice * taxRate);
        $('#total').text(totalTax.toFixed(2));
    });
});
4

2 に答える 2

1

次のように、価格とカロリーに HTML5 データ属性を使用できます。

<input type="radio" ... data-cost=".5" data-cal="260" value="white" /> White (260 calories)
<input type="radio" ... data-cost=".5" data-cal="360" value="wheat" /> Wheat (360 calories)

合計価格とカロリーを合計するときは、現在のラジオ ボタンだけでなく、選択したすべてのラジオ ボタンを次のように繰り返します。

$('input:radio:checked').each(function() {
    var input = $(this);
    price += parseFloat(input.attr('data-cost'), 10);
    cal += parseInt(input.attr('data-cal'), 10);
});

これが実際の例です: http://jsfiddle.net/ncCgu/

HTML5 データ属性を使用できない場合の例を次に示します: http://jsfiddle.net/z55rd/

于 2012-12-04T02:52:29.460 に答える
1

ラジオ ボタンをクリックすると、最近クリックした値を反映した小計しか表示されないという苦情を正しく理解している場合。これは正しいですか？使用している残りの部分を投稿していただけると助かりますHTML code(サンドイッチにはパン以外の具材が含まれていると思います)。

今のところ、あなたのコードを jsFiddle : http://jsfiddle.net/devlshone/SUKsM/に落とし込み、いくつかの変更を加えました。

もう少し説明して、さらに を提供HTML codeしていただければ、喜んでお手伝いさせていただきます。

于 2012-12-04T03:04:36.173 に答える