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

Question

我正在使用jquery开发一个小计算器。到目前为止，它工作得很好，但不能使用复选框。复选框有一个默认的value="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

我不是使用复选框的值，而是将单击的属性用作布尔值，如果选中则将其设置为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

EDIT -似乎我稍微误解了操作，请参见更新的fiddle 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 2

您需要：

$(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中。

更新的fiddle：http://jsfiddle.net/4LsA8/3/

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

实时小提琴here