计算2/5项后的价格表+折扣

Question

I am working on a interactive price list for a friend of mine. She want a price list, where the customer can check her prices. If the customer clicks on multiple options the price is automatically calculated. There are two price lists. One for Woman and one for Man.
That is working so far.

The problem which I've got is: When I change between Woman and Man, the price is still in the "total" field.
But the biggest problem for me is, that when the customer selects 2-4 options he get a discount of 10% and 5 or more options he get 20% discount.

Here you can see my codepen

$(document).ready(function() {
    $('ul.tabs li').click(function() {
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#" + tab_id).addClass('current');

    })
})

$(function() {
    $('input').click(function() {

        var total = 0;
        $('input:checked').each(function(index, item) {
            total += parseFloat(item.value);
        });
        $('.total').text(total);
    });
});

$('#head_checkbox').on('change', function() {
    if ($(this).is(':checked')) {
        $('.person').attr('checked', true);
    } else {
        $('.person').attr('checked', false);
    }
});

$('.person').click(function() {
    var total_length = $('.person').length;
    var total_checked_length = $('.person:checked').length;

    if (total_length == total_checked_length) {
        $('#head_checkbox').attr('checked', true);
    } else {
        $('#head_checkbox').attr('checked', false);
    }
});

var checked = false;
$('.all').click(function() {
    e = $(this).attr('name');
    checked = !checked;
    $('input[class=' + e).prop('checked', checked);
});

Answer 1

1) Change the selector to only match inputs in the current tab.

2) Count the number of checked options, and apply a discount to the total when you're done.

$(function() {
    $('input').click(function() {

        var total = 0;
        var option_count = 0;
        $('.tab-content.current input:checked').each(function(index, item) {
            total += parseFloat(item.value);
            option_count++;
        });
        // Apply multiple product discount
        if (option_count >= 5) {
            total *= .80;
        } else if (option_count >= 2) {
            total *= .90;
        }
        $('.total').text(total);
    });
});

Answer 2

Fixes for "total" filed on different tabs:

$(document).ready(function() {
        tab_1_total = 0;
        tab_2_total = 0;
        tab_id = "";
        $('ul.tabs li').click(function() {
                tab_id = $(this).attr('data-tab');

                $('ul.tabs li').removeClass('current');
                $('.tab-content').removeClass('current');

                $(this).addClass('current');
                $("#" + tab_id).addClass('current');

                if( tab_id == "tab-1") {
                    $('.total').text(tab_1_total);
                }

                else if( tab_id == "tab-2") {
                    $('.total').text(tab_2_total);
                }
        })
})

$(function() {
        $('input').click(function() {

                var total = 0;
                var option_count = 0;   

                $('.tab-content.current input:checked').each(function(index, item) {
                        total += parseFloat(item.value);
                        option_count++;
                });
                // Apply multiple product discount
                if (option_count >= 5) {
                        total *= .80;
                } else if (option_count >= 2) {
                        total *= .90;
                }

                total = total.toFixed(2);
                $('.total').text(total);

                if( tab_id == "tab-1") {
                    tab_1_total = total;
                }

                else if( tab_id == "tab-2") {
                    tab_2_total = total;                    
                }

        });
});

$('#head_checkbox').on('change', function() {
        if ($(this).is(':checked')) {
                $('.person').attr('checked', true);
        } else {
                $('.person').attr('checked', false);
        }
});

$('.person').click(function() {
        var total_length = $('.person').length;
        var total_checked_length = $('.person:checked').length;

        if (total_length == total_checked_length) {
                $('#head_checkbox').attr('checked', true);
        } else {
                $('#head_checkbox').attr('checked', false);
        }
});