Question

如何使用Jquery进行简单计算？我想用复选框，收音机和下拉菜单，但它不起作用。我得到每种类型的值，但我不能得到所有变量输出所有的总和。我可能需要告诉脚本它应该做什么onChange（）但是怎么做？

jQuery(document).ready(function() {

            jQuery("input[type=checkbox]").click(function () {
                var total_eins = 0;
                jQuery("input[type=checkbox]:checked").each(function () {

                    total_eins += parseFloat(jQuery(this).val());

                });

                jQuery('#total_eins').html(total_eins + ' EUR');

            });

            jQuery('#cat').on('change', function () {
                var selected = jQuery('#cat');
                var total_zwei = "";

                total_zwei += selected.val();

                jQuery('#total_zwei').html(total_zwei + ' EUR');

            });
   jQuery('#all').onchange(
        total += number(total_eins) + number(total_zwei);
        jQuery('#total').html(total + ' EUR');
   )};

});

HTML

<div id="all">
<label><input type="checkbox" class="option" value="100" /> 1<br/></label>
<label><input type="checkbox" class="option" value="100" /> 2<br/></label>
<label><input type="checkbox" class="option" value="100" /> 3<br/></label>
<label><input type="checkbox" class="option" value="100" /> 4<br/></label>
<div id="total_eins" type="text">0 EUR</div>

<select id="cat">
    <option value="100">test</option>
    <option value="200">test2</option>
</select>
<div id="total_zwei" type="text">0 EUR</div>
</div>

<div id="total" type="text">0 EUR</div>

Answer 1

只需编辑4行。

只需使用函数（total（））更改事件（＃all-onchange），并在需要时调用它：

jQuery(document).ready(function() {

            jQuery("input[type=checkbox]").click(function () {
                var total_eins = 0;
                jQuery("input[type=checkbox]:checked").each(function () {

                    total_eins += parseFloat(jQuery(this).val());

                });

                jQuery('#total_eins').html(total_eins + ' EUR');
                total();  // calculate it when any checkbox is changed
            });

            jQuery('#cat').on('change', function () {
                var selected = jQuery('#cat');
                var total_zwei = "";

                total_zwei += selected.val();

                jQuery('#total_zwei').html(total_zwei + ' EUR');
                total(); // calculate it when the selectbox changes
            });
   function total(){  //change the function name
        total += number(total_eins) + number(total_zwei);
        jQuery('#total').html(total + ' EUR');
   }; // change how it closes

});

完整代码：已测试：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<script>
jQuery(document).ready(function () {
    jQuery("input[type=checkbox]").click(function () {
        var total_eins = GetEinsTotal();
        jQuery('#total_eins').html(total_eins + ' EUR');
    });
    jQuery('#cat').on('change', function () {
        var selected = $(this);
        var total_zwei = "";
        total_zwei += selected.val();
        jQuery('#total_zwei').html(total_zwei + ' EUR');
    });
    jQuery('#all').on('change', function () {
        var total_eins = GetEinsTotal();
        var total_zwei = jQuery('#cat').val();
        var total = total_eins + parseInt(total_zwei);
        jQuery('#total').html(total + ' EUR');
    });
});

function GetEinsTotal() {
    var total_eins = 0;
    jQuery("input[type=checkbox]:checked").each(function () {
        total_eins += parseFloat(jQuery(this).val());
    });

    return total_eins;
}
</script>
<body>
<div id="all">
<label><input type="checkbox" class="option" value="100" /> 1<br/></label>
<label><input type="checkbox" class="option" value="100" /> 2<br/></label>
<label><input type="checkbox" class="option" value="100" /> 3<br/></label>
<label><input type="checkbox" class="option" value="100" /> 4<br/></label>
<div id="total_eins" type="text">0 EUR</div>

<select id="cat">
    <option value="100">test</option>
    <option value="200">test2</option>
</select>
<div id="total_zwei" type="text">0 EUR</div>
</div>

<div id="total" type="text">0 EUR</div>
</body>
</html>

它有效！

Answer 2

您可以使用以下JavaScript：

jQuery(document).ready(
    function($)
    {
        /**
        * The following function will always calculate the Total
        */
        function getTotal(){
            var $total = 0;
            var $checkboxes = $('input[type="checkbox"]:checked');
            var $cat = $('#cat');

            $checkboxes.each(
                function() {
                    $total += parseInt($(this).val(), 10);
                }
            );

            $total += parseInt($cat.val());

            return $total;
        }

        /**
        * The following function will always update your HTML text
        */
        function updateDOM()
        {
            var $total_zwei = $('#total_zwei');
            var $total = $('#total');

            $total_zwei.text(getTotal() + ' EUR');
            $total.text(getTotal() + ' EUR');
        }

        // Update the DOM immediately on page load
        updateDOM();

        // get the required elements you like to track
        var $checkboxes = $('input[type="checkbox"]');
        var $cat = $('#cat');

        // On checkbox change event calculate again the DOM
        $checkboxes.on(
            'change',
            function()
            {
                updateDOM();
            }
        );

        // On select option change update again the DOM
        $cat.on(
            'change',
            function()
            {
                updateDOM();
            }
        );
    }
);

您还可以在此处查看正在运行的示例： http://jsfiddle.net/66rwj5xy/

Answer 3

您可以创建一个获取eins和zwei总数的函数。对于总计算，您可以调用这些函数并将返回的eins和zwei值一起添加：

jQuery(document).ready(function () {

    jQuery("input[type=checkbox]").click(function () {
        var total_eins = GetEinsTotal();
        jQuery('#total_eins').html(total_eins + ' EUR');
    });

    jQuery('#cat').on('change', function () {
        jQuery('#total_zwei').html(GetZweiTotal() + ' EUR');
    });

    jQuery('#all').on('change', function () {
        var total_eins = GetEinsTotal();
        var total_zwei = GetZweiTotal();
        var total = total_eins + parseInt(total_zwei);
        jQuery('#total').html(total + ' EUR');
    });
});

function GetEinsTotal() {
    var total_eins = 0;
    jQuery("input[type=checkbox]:checked").each(function () {
        total_eins += parseFloat(jQuery(this).val());
    });

    return total_eins;
}

function GetZweiTotal(){
    return jQuery('#cat').val();
}

以下是演示：http://jsfiddle.net/c75p9Loc/1/

用jquery计算多个输入元素

3 个答案: