1

jqueryを使ってちょっとした電卓を作っています。これまでのところ問題なく動作しますが、チェックボックスでは機能しません。チェックボックスにはデフォルト値="200" がありますが、チェックボックスがチェックされている場合にのみ合計する必要があります。

あなたが私を正しく理解してくれることを願っています！私のコードは次のとおりです。

<div>
<label for="horse">Horse</label>
<select id="horse" class="" name="horse" title="" size="1">
<option value="0 ">choose</option>
<option value="100">Horse 1 (+100 EUR)</option>
<option value="200">Horse 2 (+200 EUR)</option>
</select>
</div>
<div>
<label for="saddle">Saddle</label>
<select id="saddle" class="" name="sattel" title="" size="1">
<option value="0 ">choose</option>
<option value="400.20">Saddle 1 (+400,20 EUR )</option>
<option value="500.57">Saddle 2 (+500,57 EUR)</option>
</select>
</div>
<div>
<input type="hidden" alt="ghost" value="" name="pet">
<input id="pet" class="label_left" type="checkbox" name="haustier" title="" value="200">
<label for="pet">Pet?</label>
</div>
<div class="total"></div>

そして私のjquery：

$(function() {
$('#horse').change(endergebnis);
$('#saddle').change(endergebnis);
$("#pet").change(function () {
    if ($('#pet:checked').val('') ) {
        $('#pet').val();
    } else {
        $('#pet').val('0');
    }

});
});
function endergebnis(){
var horse = $('#horse').val();
var saddle = $('#saddle').val();
var pet = $('#pet').val();

var total =
    Number(horse) + 
    Number(saddle) +
    Number(pet)

$('.total').html(total + " EUR");
};

私のjsfidlle：http://jsfiddle.net/tobisagt/g2fsQ/372/

4

4 に答える 4

1

あなたがしたい：

$(function() {
    $('#horse').change(endergebnis);
    $('#saddle').change(endergebnis);

    $("#pet").data('val', '0');

    $("#pet").change(function () {
        if ($(this).is(':checked')) {
            $(this).data('val', $(this).val());
        } else {
            $(this).data('val', '0');
        }
        endergebnis();
    });
});
function endergebnis(){
    var horse = $('#horse').val();
    var saddle = $('#saddle').val();
    var pet = $("#pet").data('val');

    var total =
        Number(horse) + 
        Number(saddle) +
        Number(pet)

    $('.total').html(total + " EUR");
};

'200' を JavaScript に手動で書き込む必要がないように、値をデータ オブジェクトに移動しました。

更新されたフィドル: http://jsfiddle.net/4LsA8/3/

于 2013-03-07T12:56:54.070 に答える
1

チェックボックスの値を使用するのではなく、クリックされた属性をブール値として使用し、チェックされている場合は 200 に設定しています。これはもちろん、必要に応じて変数に抽出できます。

$(function () {
    $('#horse').change(endergebnis);
    $('#saddle').change(endergebnis);
    $("#pet").change(endergebnis);
});

function endergebnis() {
    var horse = +$('#horse').val();
    var saddle = +$('#saddle').val();
    var pet = ($('#pet').attr('checked')) ? 200 : false;
    if (pet) {
        var total = (horse + saddle + pet).toFixed(2);
        $('.total').html(total + " EUR");
    } else {
        $('.total').html("");
    }
}

また、I を使用するのではなくNumber(var)、要素選択の先頭に+.

ここにJSFiddleがあります

編集 - OP を少し誤解したようです。ペットのチェックボックスをオンにすると値に 200 が追加され、オフにすると値から 200 が削除されます。新しいコードは次のとおりです。

function endergebnis() {
    var horse = +$('#horse').val();
    var saddle = +$('#saddle').val();
    var pet = ($('#pet').attr('checked')) ? +$('#pet').val() : 0;
    var total = (horse + saddle + pet).toFixed(2);
    $('#total').html(total + " EUR");
}
于 2013-03-07T13:05:24.100 に答える
0

これを試してください：（計算内のチェックボックスのチェックを移動しました。チェックされていない場合は、値を0に設定します！）

function endergebnis(){
  var horse = $('#horse').val();
  var saddle = $('#saddle').val();
  var pet = $('#pet').val();
 if (!$('#edit-checkbox-id').is(':checked')) {
    pet = 0;
 };


  var total = Number(horse) + Number(saddle) + Number(pet);

  $('.total').html(total + " EUR");
};
于 2013-03-07T13:03:24.520 に答える
0

これを試して 

$(function() {
        $('#horse').change(endergebnis);
        $('#saddle').change(endergebnis);
        //$("#pet").click(function () {
        $('#pet').mousedown(function() {
            if($('#pet').is(":checked")){
                $('#pet').val('0');
            } else {
                $('#pet').val('200');
            }
            endergebnis();
        });
    });
    function endergebnis(){
        var horse = $('#horse').val();
        var saddle = $('#saddle').val();
        var pet = $('#pet').val();

        var total =
            Number(horse) + 
            Number(saddle) +
            Number(pet)

        $('.total').html(total + " EUR");
    };

ここでフィドルをライブ

于 2013-03-07T13:00:20.247 に答える