-4

最初に 2 つの料金プラン オプションのいずれかを選択した後、フォーム上で計算を生成する必要がありますが、jQuery の知識は十分ではありません (まだ!) :)

「支払い」の値は、プラン 1 の選択ボックスの合計またはプラン 2 の設定価格のいずれかである必要があります。

ここにいくつかのコードがあります：

<div class="form-row">
    <div class="plan-select">
        <div class="form-row">
            <div class="label-container">
                <label for=""></label>
            </div>
            <div class="input-container">
                <input type="radio" id="planchoose" name="planchoose" value="0.00" checked /> Plan 1
            </div>
        </div>
        <div class="form-row">
            <div class="label-container">
                <label for="Bin1_Count">Bin 1</label>
            </div>
            <div class="input-container">
                <select id="Bin1_Count" name="Bin1_Count">
                    <option value="0"> - select - </option>
                    <option value="10.00">1 - 10.00</option>
                    <option value="15.00">3 - 15.00</option>
                    <option value="52.00">13 - 52.00</option>
                </select>
            </div>
        </div>
        <div class="form-row">            
            <div class="label-container">
                <label for="Bin2_Count">Bin 2</label>
            </div>
            <div class="input-container">
                <select id="Bin2_Count" name="Bin2_Count">
                    <option value="0"> - select - </option>
                    <option value="10.00">1 clean - 10.00</option>
                    <option value="15.00">3 cleans - 15.00</option>
                    <option value="52.00">13 cleans - 52.00</option>
                </select>
            </div>
        </div>        

    </div>

    <div class="plan-select-split">OR</div>

    <div class="plan-select">
        <div class="form-row">
            <div class="label-container">
            </div>
            <div class="input-container">
                <input type="radio" id="planchoose" name="planchoose" value="120" /> Plan 2
                <p>Set price<br /></p>
            </div>
        </div>        
    </div>
</div>
<div class="form-row">
    <div class="label-container">
        <label for="Payment">Total</label>
    </div>
    <div class="input-container">
        <input type="text" id="Payment" name="Payment" value="0.00" readonly />
    </div>
</div>

そして、ここにフィドルがあります：http://jsfiddle.net/xXQHJ/3/

何卒よろしくお願い申し上げます。

4

3 に答える 3

1

これにより、両方の可能性がカバーされます。idラジオの sを変更する必要がありました。

$('input[name=planchoose], select').on('change',function(){
    var chosenPlan = $('input[name=planchoose]:checked').attr('id');
    var total = 0.00;
    switch (chosenPlan){
        case 'planchoose1':
            total = parseFloat($('#Bin1_Count').val()) +  parseFloat($('#Bin2_Count').val());
        break;
        case 'planchoose2':
            total = parseFloat($('#planchoose2').val());
        break;
    }
    $('#Payment').val(total.toFixed(2));
});

フィドル: http://jsfiddle.net/xXQHJ/5/

于 2014-07-14T15:59:18.787 に答える
1

このコードは、必要なものである必要があります。

jQuery の .on() ドキュメント

$(document).ready(function() {
    $(document).on('change', '.binOptions', function() {
        var bin1, bin2, finalTotal;
        bin1 = $(' #Bin2_Count option:selected ').val();
        bin2 = $(' #Bin1_Count option:selected ').val();
        finalTotal = parseFloat(bin1) + parseFloat(bin2);
        $(' #Payment ').val(finalTotal.toFixed(2));
    });
});

そしてフィドルをあなたに。

編集:「binOptions」クラスが選択ボックスに追加されていることに注意してください。また、デイブの答えも正しいですが、ページに動的に生成されたコンテンツでは .change() が機能しないことに注意してください（将来の校正のためのちょっとした情報です）。

于 2014-07-14T15:44:10.130 に答える
0

ここから始めましょう: http://jsfiddle.net/daveSalomon/xXQHJ/4/。

コードの要点: 複数の要素に同じ ID を付けないでください。ID は一意である必要があります。

HTML

<div class="form-row">
<div class="plan-select">
    <div class="form-row">
        <div class="label-container">
            <label for=""></label>
        </div>
        <div class="input-container">
            <input type="radio" id="plancalc" name="plan" value="0.00" checked /> Plan 1
        </div>
    </div>
    <div class="form-row">
        <div class="label-container">
            <label for="Bin1_Count">Bin 1</label>
        </div>
        <div class="input-container">
            <select id="Bin1_Count" name="Bin1_Count">
                <option value="0"> - select - </option>
                <option value="10.00">1 - 10.00</option>
                <option value="15.00">3 - 15.00</option>
                <option value="52.00">13 - 52.00</option>
            </select>
        </div>
    </div>
    <div class="form-row">            
        <div class="label-container">
            <label for="Bin2_Count">Bin 2</label>
        </div>
        <div class="input-container">
            <select id="Bin2_Count" name="Bin2_Count">
                <option value="0"> - select - </option>
                <option value="10.00">1 clean - 10.00</option>
                <option value="15.00">3 cleans - 15.00</option>
                <option value="52.00">13 cleans - 52.00</option>
            </select>
        </div>
    </div>        
</div>
<div class="plan-select-split">OR</div>
<div class="plan-select">
    <div class="form-row">
        <div class="label-container">
        </div>
        <div class="input-container">
            <input type="radio" id="planset" name="plan" value="120" /> Plan 2
            <p>Set price<br /></p>
        </div>
    </div>        
</div>
</div>
<div class="form-row">
<div class="label-container">
    <label for="Payment">Total</label>
</div>
<div class="input-container">
    <input type="text" id="Payment" name="Payment" value="0.00" readonly />
</div>
</div>

Javascript

$(document).ready(function(){
    // -- calculated price
    $('#plancalc,#Bin1_Count,#Bin2_Count').change(function(){
        var price = Number($('#Bin1_Count').val()) + Number($('#Bin2_Count').val());
        $('#plancalc').click();
        $('#Payment').val(price);
    });
    // -- set price
    $('#planset').change(function(){
        $('#Payment').val('set price...');
    });
});

将来的には、まず自分で試してみてください。あなたの努力が見られれば、人々はもっと喜んで助けてくれます!

于 2014-07-14T15:40:53.827 に答える