Question

我正在尝试建立一个价格计算器。我有多个不同项目的类别。每个类别都应显示其总价值。然后，每个类别的所选项目必须总结并在某处显示其总体价值。

下载演示：JSFiddle

$(document).ready(function() {
    $('input').click(function() {
        var total1 = 0;
        $('.option1:checked').each(function() {
            total1 += parseInt($(this).val());
         });

         $('.total').html(total1 + ' €')
         $('.overallprice').html(total1)
    });

    $('input').click(function() {
        var total2 = 0;
        $('.option12:checked').each(function() {
            total2 += parseInt($(this).val());
         });

         $('.total2').html(total2 + ' €')
         $('.overallprice').html(total2)
    });
});

Answer 1

类似于this？

$(document).ready(function() {

    $('ul').each(function(){
        var $thisUl = $(this);
        $thisUl.find('input').change(function(){
            var total = 0;
            $thisUl.find('input:checked').each(function() {
                total += parseInt($(this).val());
            });
            $thisUl.find('li:last span').html(total + ' €')
        });
    });

    $('input').change(function(){
        var overAllPrice = 0;
        $('input:checked').each(function(){
            overAllPrice += parseInt($(this).val());
        })
        $('.overallprice').html(overAllPrice);
    })
});

Answer 2

您正在为每个总计部分注册点击处理程序，并将整体价格等于上次计算的总计而不是总计的总和。您可以使用单击处理程序并计算总计。总跨度的总和并将其整体放入，见下面的代码

$(document).ready(function() {
  $('input[type="checkbox"]').click(function() {
    var total = 0;
    var $parent = $(this).closest('ul');
    $parent.find('input:checked').each(function() {
      total += parseInt($(this).val());
    });
    //find span having class start with total by using start with selector
    $parent.find('span[class^=total]').html(total + ' €');

    var overallPrice = 0;
    $('span[class^=total]').each(function() {
     //span having class start with total
      overallPrice += parseInt($(this).html().replace(' €',''));
    });
    $('.overallprice').html(overallPrice)
  });
});

<强> JSFiddle Demo

Answer 3

我已更新您的jsfiddle

验证功能。实际上，这个概念是获取所有被检查的复选框，然后是总值的总和。

function calTotal() {
    var totalprice = 0;
    $('#form input:checked').each(function() {
        totalprice += parseInt($(this).val());
    });
    $('.overallprice').html(totalprice);
}

您需要为已连接的每个输入处理程序调用此函数

Answer 4

只需将此脚本替换为您的jsfiddle：

$(document).ready(function() {
    $('input').click(function() {
        var total1 = 0;
        $('.option1:checked').each(function() {
            total1 += parseInt($(this).val());
        });
        $('.total').html(total1 + ' €')
        $('.overallprice').html(total1);

        var total2 = 0;
        $('.option12:checked').each(function() {
            total2 += parseInt($(this).val());
        });
        $('.total2').html(total2 + ' €')
        $('.overallprice').html(total2);

        var total3 = 0;
        $('.option13:checked').each(function() {
            total3 += parseInt($(this).val());
        });
        $('.total3').html(total3 + ' €');
        $('.overallprice').html( (total1 + total2 + total3) + ' €');
    });
});

Answer 5

<强> DEMO

为所有click event handler

checkbox

确定点击了哪个checkbox并相应地更新其相对总数
为所有each执行单独的checkbox循环以更新total。

您更新的JS将是：

$(document).ready(function() {
  $('input[type=checkbox]').click(function() {
    //one click event attached to all checkbox
    var parent = $(this).closest('ul'); //get its closest ul element which contains remaining checkbox
    var total1 = 0;//keep one variable for total to add it to each checkboxes total
    var overAll = 0;//one for overall total
    parent.find($('input[type=checkbox]:checked')).each(function() {
      total1 += parseInt($(this).val());
      //each loop on clicked checkbox's siblings
    })
    parent.find('.total').text(total1 + " €");//update total on clicked checkbox hierarchy
    $('input[type=checkbox]:checked').each(function() {
      overAll += parseInt($(this).val());
      //each loop on all the checkbox which are checked to get overall total
    });
    $('.overallprice').html(overAll)
  })
})

Jquery价格检查计算器

5 个答案: