用jQuery点击按钮添加值

Add Value on Button Click with jQuery

本文关键字：添加 按钮 jQuery      更新时间：2023-09-26

单击每个按钮时，如何添加相应的值？

使用我当前的脚本，它几乎可以工作，但它添加了以前的每个值，而不仅仅是添加当前值：

jQuery(function() {
    total = 0;
    jQuery("input").click(function() {
        jQuery("input:checked").not('input[value="reset"]').each(function() {
            total += parseFloat(jQuery(this).val());
        });
        jQuery("#Totalcost").html("Save up to " + total + "%");
    });
    jQuery('input[value="reset"]').click(function(){
        jQuery('span#Totalcost').html("Calculate your Savings!");
        total = 0;
    });
});

尝试声明全局可见变量。

JSFiddle

var total = 0;
jQuery(function() {
    jQuery("input").click(function() {
        jQuery("input:checked").not('input[value="reset"]').each(function() {
            total += parseFloat(jQuery(this).val());
        });
        jQuery("#Totalcost").html("Save up to " + total + "%");
    });
    jQuery('input[value="reset"]').click(function(){
        jQuery('span#Totalcost').html("Calculate your Savings!");
        jQuery("input:checked").prop('checked', false);
        total = 0;
    });
});

信息

total变量在jQuery(function (){外部声明，因为我不知道你不需要这个函数外部的变量。

Btw。也许你对jQuery变更事件感兴趣？

我认为在这种情况下这是更好的选择。

您不会在每次单击复选框时将total设置回零。在点击事件处理程序中将total重置为零

jQuery(function() {
    var total = 0;
    jQuery("input").click(function() {
        total = 0;
        jQuery("input:checked").not('input[value="reset"]').each(function() {
            total += parseFloat(jQuery(this).val());
        });
        jQuery("#Totalcost").html("Save up to " + total + "%");
    });
    jQuery('input[value="reset"]').click(function(){
        jQuery('span#Totalcost').html("Calculate your Savings!");
        total = 0;
    });
});

JSFiddle

相关文章：