复选框出现问题，点击和更改时选择交互

Question

我有一个表单，用户可以在其中指定自行车活动的酒店住宿。选项包括：

1） 入住前一晚（+50欧元）

2） 前一天晚上吃晚饭（+20欧元）

他还可以在酒店预订最多可容纳6名"非自行车手"的房间。如果用户选择了上述任一选项，则增加的费用也必须适用于他添加的任何非摩托车手，但前提是他们是成年人（12岁以上），这是由下降决定的。

示例：基本酒店成本=100欧元。用户选中"前一晚"复选框，总价现在是150。如果他也勾选了"晚餐前"复选框，那么现在的总价是170。如果他再加上两个不骑自行车的人，这两个人的酒店总成本就变成了340（2 x 170）。

我有这种工作方式，但当1） 重复选中/取消选中任一复选框2） 用户多次更改下拉列表的值

我也意识到我的jQuery代码重复得很痛苦。。。

Html（简化）：

<input type="checkbox" name="want_pre_stay" value="1" id="want_pre_stay"> Stay the night before <strong id="price_pre_stay">50</strong> 
<input type="checkbox" name="want_pre_dinner" value="1" id="want_pre_dinner"> Dinner night before   <strong id="price_pre_dinner">20</strong>
Total personal accomodation (before non-bikers are added): <strong id="price_hotel"></strong>
<select name="nf_geboortejr[]" class="form-control input-sm" id="nf-0">
<option value="1934">1934</option>...<option value="2014">2014</option>

其中有6个选择，除了第一个（id名称上升到"nf-5"）外，所有选择最初都是隐藏的。选择"nf-1"到"nf-5"，当显示时，可以再次隐藏，此时非摩托车手的总成本应该反映这一点。。。

非摩托车手总数如下所示：

Total accomodation for non-bikers: <strong id="nf-total"></strong>

JavaScript:

var price_hotel = 100;
var price_pre_stay = 50;
var price_pre_dinner = 20;
var end_total = 100;
var want_pre_stay = 0;
var want_pre_dinner = 0;
var y = 2014;
// on document.ready
$('#price_pre_stay').hide();
$('#price_pre_dinner').hide();
$('input[name=want_pre_stay]').on('click', function(){
$('#price_pre_stay').toggle();
if($(this).prop('checked')){
    want_pre_stay = 1;
    price_hotel = price_hotel + price_pre_stay;
    end_total = end_total + price_pre_stay;
    $('#price_hotel').number(price_hotel, 2, ',', ' ' ); //uses jQuery plugin
    $('#end_total').number(end_total, 2, ',', ' ' ); //uses jQuery plugin
}
if(!$(this).prop('checked')){
    want_pre_stay = 0;
    price_hotel = price_hotel - price_pre_stay;
    end_total = end_total - price_pre_stay;
    $('#price_hotel').number(price_hotel, 2, ',', ' ' );
    $('#end_total').number(end_total, 2, ',', ' ' );
}
});
// I have exactly the same code for $('input[name=want_pre_dinner]')
// #nf-0 = first "non-biker" dropdown
$('#nf-0').on('change', function(){
select_val = $(this).val();
age = y - select_val;   
if(age > 12){
    nf_total = nf_total + price_hotel;
    end_total = end_total + price_hotel;
}   
if(want_pre_stay == 1 && age > 12){
    nf_total = nf_total + price_pre_stay;
    end_total = end_total + price_pre_stay;
}
if(want_pre_dinner == 1 && age > 12){
    nf_total = nf_total + price_pre_dinner;
    end_total = end_total + price_pre_dinner;
}
$('#nf-total').number(nf_total, 2, ',', ' ' );
$('#end_total').number(end_total, 2, ',', ' ' );
});
// I have another 5 of these, up to $nf-5...

是否可以使其工作方式不受复选框被选中/取消选中的次数的影响，也不受选择值更改次数的影响？

提前感谢您的回复。。。

Answer 1

类似这样的东西：

Fiddle

var price_hotel = 100;
var price_pre_stay = 50;
var price_pre_dinner = 20;
function calc() {
    var nfTot = 0,end_total = 0;
    $(".nf").each(function () { // each non-biker
        nfTot += calcNF(this);
    });
    $('#nf_total').text(nfTot);
    end_total = nfTot + // non-bikers
        price_hotel + // the person filling in the form
        ($('input[name=want_pre_stay]').is(":checked") ? price_pre_stay : 0) + 
        ($('input[name=want_pre_dinner]').is(":checked") ? price_pre_dinner : 0);
    $('#end_total').text(end_total);
}
function calcNF(nf) {
    var nfValue= nf.value;
    if (nfValue=="") return 0; // nothing selected here
    var age = new Date().getFullYear() - nfValue; // as of now
    if (age < 12) return 0;
    return price_hotel + 
        ($('input[name=want_pre_stay]').is(":checked") ? price_pre_stay : 0) + 
        ($('input[name=want_pre_dinne]').is(":checked") ? price_pre_dinner : 0);
}
$(function () {
    $('#price_pre_stay').hide();
    $('#price_pre_dinner').hide();
    $('#price_hotel').text(price_hotel);
    $('input[name=want_pre_stay]').on('click', function () {
        $('#price_pre_stay').toggle(this.checked);
        calc();
    });
    $('input[name=want_pre_dinner]').on('click', function () {
        $('#price_pre_dinner').toggle(this.checked);
        calc();
    });
    $('.nf').on('change', function () {
        calc();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
    <input type="checkbox" name="want_pre_stay" value="1" id="want_pre_stay">Stay the night before <strong id="price_pre_stay">50</strong> 
</p>
<p>
    <input type="checkbox" name="want_pre_dinner" value="1" id="want_pre_dinner">Dinner night before	<strong id="price_pre_dinner">20</strong>
</p>
<p>Total personal accomodation (before non-bikers are added): <strong id="price_hotel"></strong>
</p>
<p>Non biker age:
    <select name="nf_geboortejr[]" id="nf-0" class="nf">
        <option value="">Please select</option>
        <option value="1934">1934</option>
        <option value="1935">1935</option>
        <option value="1934">1936</option>
        <option value="2014">2014</option>
    </select>
</p>
<p>Total accomodation for non-bikers: <strong id="nf-total"></strong>
</p>
<p>End total: <strong id="end_total"></strong>