Question

我正在使用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/

Answer 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/

Answer 2

我没有使用复选框的值，而只是使用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");
}

Answer 3

试试这个

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

live fiddle here

Answer 4

试试这个:(我已经检查了计算中的复选框。如果没有选中，我将值设置为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");
};

JQuery - 通过单击更改复选框的值

4 个答案: