javascript - jQuery 文本框更改计算

标签 javascript jquery checkbox

我有几个复选框!每次选中复选框时,它都会自动总结总成本:

<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 折扣:

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

我希望总价从折扣文本输入中扣除价格。上面的代码基本上将替换总价,从复选框到文本输入。

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

最佳答案

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

onCheck 内部调用 calculateSum 以使折扣始终得到计算。

还简化了绑定(bind)处理程序的方式,因为您创建了不需要的开销。

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

关于javascript - jQuery 文本框更改计算,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5487225/

相关文章:

javascript - 如何将波斯日期转换为公历日期?

javascript - 查询 Mongo 获取今天添加的所有条目(新手)

javascript - js脚本仅显示来自mysql数据库的真实 bool 值

html - Dart 复选框,强制检查

android - onPrepareDialog ListView 未在第一个警报对话框创建时填充

javascript - 选中复选框以在 DOM 中消失

javascript - 如何在图像点击上设置日历样式

javascript - 我正在做一项练习,目标是从代码学院打印出 "steve"和 "bill",它只打印出一个名字而不是两个

javascript - 如何从 jquery datepicker 计算年龄?

javascript - 转换后 JQuery Mobile 隐藏滚动条