jQuery一起添加两个总计

Question

我有一个基本表格，客户可以通过复选框和选择框选择一系列门票。然后它会生成一个子总数。

我只想看看如何将这两个小计加在一起。

我的HTML

    <form id="calx-south-green">
            <fieldset id="adults">
                <legend>Additional Adults - <span class="red">£228</span></legend>
                <div>
                    <label for="1">1</label>
                    <input type="checkbox" id="1" value="228" />
                </div>
                <div>
                    <label for="2">2</label>
                    <input type="checkbox" id="2" value="228" />
                </div>
                <div>
                    <label for="3">3</label>
                    <input type="checkbox" id="3" value="228" />
                </div>
                <div>
                    <label for="4">4</label>
                    <input type="checkbox" id="4" value="228" />
                </div>
                <div>
                    <label for="5">5</label>
                    <input type="checkbox" id="5" value="228" />
                </div>
                <div>
                    <select name="proc" id="proc">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </div>
                <input type="text" name="Adult Sub Total" id="adults_total" />
            </fieldset>

            <fieldset id="young">
                <legend>Young Adults 16-21 - <span class="red">£146</span></legend>
                <div>
                    <label for="1">1</label>
                    <input type="checkbox" id="1" value="146" />
                </div>
                <div>
                    <label for="2">2</label>
                    <input type="checkbox" id="2" value="146" />
                </div>
                <div>
                    <label for="3">3</label>
                    <input type="checkbox" id="3" value="146" />
                </div>
                <div>
                    <label for="4">4</label>
                    <input type="checkbox" id="4" value="146" />
                </div>
                <div>
                    <select>
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                    </select>
                </div>
                <input type="text" name="Young Sub Total" id="young_total" />
            </fieldset>
            <div>
                <label for="base_fee">Base Fee</label>
                <input type="text" name="base_fee" id="base_fee" value="228" />
            </div>
            <div>
                <p class="result">RESULT HERE</p>
            </div>
</form>

我的代码是：

    var total_adults = $("#adults_total");
var checkBox_adults = $("#adults input[type='checkbox']");
var _select_adults = $("#adults select");

checkBox_adults.click(function(){
    checkBox_adults.prop("checked", false);
    var _index = $(this).attr("id");

    total_adults.val(_index * 228);

    _select_adults.val(_index);

    checkBox_adults.each(function(){
        if (_index > 0) {
            $(this).prop("checked", true);
            _index--;
        }
    });
});

_select_adults.change(function() {

    checkBox_adults.prop("checked", false);

    var _val = $(this).val();

    total_adults.val(_val * 228);

    checkBox_adults.each(function() {
        if (_val > 0) {
            $(this).prop("checked", true);
            _val--;
        }
    });

});




var total_young = $("#young input[name='Young Sub Total']");
var checkBox_young = $("#young input[type='checkbox']");
var _select_young = $("#young select");

checkBox_young.click(function(){
    checkBox_young.prop("checked", false);
    var _index = $(this).attr("id")
    total_young.val(_index * 146);
    _select_young.val(_index);
    checkBox_young.each(function(){
        if (_index > 0) {
            $(this).prop("checked", true);
            _index--;
        }
    });
});

_select_young.change(function() {
    checkBox_young.prop("checked", false);
    var _val = $(this).val();
    total_young.val(_val * 146);
    checkBox_young.each(function() {
        if (_val > 0) {
            $(this).prop("checked", true);
            _val--;
        }
    });
});

为了在jQuery中添加，我尝试这样做，但它无法正常工作

var num1 = $("#adults_total").val(),
    num2 = $("#young_total").val(),
    result = parseInt(num1, 10) + parseInt(num2, 10);
$(".result").text(result);

我还有一个小提琴演示 - http://jsfiddle.net/barrycorrigan/L2as6143/1/

Answer 1

用作

    var total_adults = $("#adults_total");
    var checkBox_adults = $("#adults input[type='checkbox']");
    var _select_adults = $("#adults select");

    checkBox_adults.click(function(){
        checkBox_adults.prop("checked", false);
        var _index = $(this).attr("id");

        total_adults.val(_index * 228);

        _select_adults.val(_index);

        checkBox_adults.each(function(){
            if (_index > 0) {
                $(this).prop("checked", true);
                _index--;
            }
        });
    });

    _select_adults.change(function() {

        checkBox_adults.prop("checked", false);

        var _val = $(this).val();

        total_adults.val(_val * 228);

        checkBox_adults.each(function() {
            if (_val > 0) {
                $(this).prop("checked", true);
                _val--;
            }
        });

    });




    var total_young = $("#young input[name='Young Sub Total']");
    var checkBox_young = $("#young input[type='checkbox']");
    var _select_young = $("#young select");

    checkBox_young.click(function(){
        checkBox_young.prop("checked", false);
        var _index = $(this).attr("id")
        total_young.val(_index * 146);
        _select_young.val(_index);
        checkBox_young.each(function(){
            if (_index > 0) {
                $(this).prop("checked", true);
                _index--;
            }
        });
         Total();
    });

    _select_young.change(function() {
        checkBox_young.prop("checked", false);
        var _val = $(this).val();
        total_young.val(_val * 146);
        checkBox_young.each(function() {
            if (_val > 0) {
                $(this).prop("checked", true);
                _val--;
            }
        });
        Total();
    });

        function Total(){
var num1 = $("#adults_total").val(),
        num2 = $("#young_total").val(),
        result = parseInt(num1, 10) + parseInt(num2, 10);
    $(".result").text(result);
       }

Demo

以前错过的函数调用第一个复选框更改。

UPDATED ANSWEER

Answer 2

您可以尝试$("#adults :checked").length + $("#young :checked").length之类的内容。这会计算并添加每个字段集中已选中复选框的数量。

Answer 3

试试这个 - ＆gt;

＆＃13;

＆＃13;

    var total_adults = $("#adults_total");
    var checkBox_adults = $("#adults input[type='checkbox']");
    var _select_adults = $("#adults select");

    checkBox_adults.click(function(){
        checkBox_adults.prop("checked", false);
        var _index = $(this).attr("id");

        total_adults.val(_index * 228);

        _select_adults.val(_index);

        checkBox_adults.each(function(){
            if (_index > 0) {
                $(this).prop("checked", true);
                _index--;
            }
        });
    });

    _select_adults.change(function() {

        checkBox_adults.prop("checked", false);

        var _val = $(this).val();

        total_adults.val(_val * 228);

        checkBox_adults.each(function() {
            if (_val > 0) {
                $(this).prop("checked", true);
                _val--;
            }
        });

    });




    var total_young = $("#young input[name='Young Sub Total']");
    var checkBox_young = $("#young input[type='checkbox']");
    var _select_young = $("#young select");

    checkBox_young.click(function(){
        checkBox_young.prop("checked", false);
        var _index = $(this).attr("id")
        total_young.val(_index * 146);
        _select_young.val(_index);
        checkBox_young.each(function(){
            if (_index > 0) {
                $(this).prop("checked", true);
                _index--;
            }
        });
    });

    _select_young.change(function() {
        checkBox_young.prop("checked", false);
        var _val = $(this).val();
        total_young.val(_val * 146);
        checkBox_young.each(function() {
            if (_val > 0) {
                $(this).prop("checked", true);
                _val--;
            }
        });
    });


$('input[type="checkbox"], select').click(function() {
         
         var num1 = $("#adults_total").val();         
         var num2 = $("#young_total").val();
         console.log(num1 + "   " + num2);
         var result = Number(num1) + Number(num2);
         $(".result").text(result);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="calx-south-green">
                <fieldset id="adults">
                    <legend>Additional Adults - <span class="red">£228</span></legend>
                    <div>
                        <label for="1">1</label>
                        <input type="checkbox" id="1" value="228" />
                    </div>
                    <div>
                        <label for="2">2</label>
                        <input type="checkbox" id="2" value="228" />
                    </div>
                    <div>
                        <label for="3">3</label>
                        <input type="checkbox" id="3" value="228" />
                    </div>
                    <div>
                        <label for="4">4</label>
                        <input type="checkbox" id="4" value="228" />
                    </div>
                    <div>
                        <label for="5">5</label>
                        <input type="checkbox" id="5" value="228" />
                    </div>
                    <div>
                        <select name="proc" id="proc">
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                    </div>
                    <input type="text" name="Adult Sub Total" id="adults_total" />
                </fieldset>

                <fieldset id="young">
                    <legend>Young Adults 16-21 - <span class="red">£146</span></legend>
                    <div>
                        <label for="1">1</label>
                        <input type="checkbox" id="1" value="146" />
                    </div>
                    <div>
                        <label for="2">2</label>
                        <input type="checkbox" id="2" value="146" />
                    </div>
                    <div>
                        <label for="3">3</label>
                        <input type="checkbox" id="3" value="146" />
                    </div>
                    <div>
                        <label for="4">4</label>
                        <input type="checkbox" id="4" value="146" />
                    </div>
                    <div>
                        <select>
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                        </select>
                    </div>
                    <input type="text" name="Young Sub Total" id="young_total" />
                </fieldset>
                <div>
                    <label for="base_fee">Base Fee</label>
                    <input type="text" name="base_fee" id="base_fee" value="228" />
                </div>
                <div>
                    <p class="result">RESULT HERE</p>
                </div>
    </form>

＆＃13;

＆＃13;

＆＃13;