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");
};

我的jsfiddle：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

而不是使用复选框的值，我只是将 clicked 属性用作布尔值并将其设置为 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("");
    }
}

还请注意，Number(var)我使用的是在元素选择前加上+.

这是一个JSFiddle

编辑 - 似乎我稍微误解了 OP，请参阅更新的小提琴here，其中检查宠物复选框将 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

试试这个 

$(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 回答
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 回答