Question

我的复选框很少！每次选中复选框时，它都会自动总结总费用：

<input type="checkbox" rel="90" alt="30.00">Pearl or White
<input type="checkbox" rel="120" alt="35.00">Natural
<div id="t_balance"></div>

计算总价格的jquery

function onCheck(){
   var t_balance = 0;
   $("input[type=checkbox]:checked").each(function() {  
   t_balance += parseFloat($(this).attr("alt")); });
   $("#t_balance").html(t_balance.toFixed(2));         
}
function calculateSum() {
var sum = 0;
$(":text").each(function() {
    if(!isNaN(this.value) && this.value.length!=0) {
    sum += parseFloat(this.value);
    }
});
$("#t_balance").html(sum.toFixed(2));
 }
$("input[type=checkbox]").change(function() {onCheck(); });

现在，1折扣textinput：

<input type="text" id="discount" />

我希望总价格从折扣textinput中扣除价格。以上代码基本上将取代总价格，从复选框到textinput。

$(":text").each(function() {
$(this).keyup(function(){
    calculateSum();
});
});

完整代码http://jsfiddle.net/boyee007/jZEUz/：

function onCheck() {
    var t_balance = 0;
    $("input[type=checkbox]:checked").each(function() {
        t_balance += parseFloat($(this).attr("alt"));
    });
    $("#t_balance").html(t_balance.toFixed(2));
}

function calculateSum() {
    var sum = 0;
    $(":text").each(function() {
        if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
        }
    });
    $("#t_balance").html(sum.toFixed(2));
}
$("input[type=checkbox]").change(function() {
    onCheck();
});

$(":text").each(function() {
    $(this).keyup(function() {
        calculateSum();
    });
});

Answer 1

function onCheck() {
    var t_balance = 0;
    $("input[type=checkbox]:checked").each(function() {
        t_balance += parseFloat($(this).attr("alt"));
    });
    $("#t_balance").html(t_balance.toFixed(2));
}

function calculateSum() {
    var sum = 0;
    $(":text").each(function() {
        if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
        }
    });
    $("#t_balance").html(parseFloat($("#t_balance").text())-sum.toFixed(2));
}
$("input[type=checkbox]").change(function() {
    onCheck();
});

$(":text").each(function() {
    $(this).keyup(function() {
        calculateSum();
    });
});

Answer 2

function onCheck() {
    var t_balance = 0;
    $("input[type=checkbox]:checked").each(function() {
        t_balance += parseFloat($(this).attr("alt"));
    });
    $("#t_balance").html(t_balance.toFixed(2));

    calculateSum();
}

function calculateSum() {
    var sum = parseFloat( $("#t_balance").text() );

    $(":text").each(function() {
        if (!isNaN(this.value) && this.value.length != 0) {
            sum -= parseFloat(this.value);
        }
    });
    $("#t_balance").html(sum.toFixed(2));
}

$("input[type=checkbox]").change(onCheck);
$(":text").keyup(onCheck);

从calculateSum内拨打onCheck，以便始终计算折扣。

还简化了绑定处理程序的方式，因为您创建了不必要的开销..

演示http://jsfiddle.net/gaby/jZEUz/7/

Answer 3

如果您想要的输出是55.00，而用户同时选中了两个复选框和＆amp;在文本框中键入10，然后像这样更改您的calculateSum函数，

function calculateSum() {
    var sum = 0;
    $(":text").each(function() {
        if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
        }
    });
    $("#t_balance").html(($("#t_balance").html()-sum).toFixed(2));
}

Answer 4

http://jsfiddle.net/8W92S/您要找的是什么？

更改计算的jQuery文本框

4 个答案: