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

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

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

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

他还可以在酒店预订一个房间，最多可容纳6名“非摩托车手”。如果用户选中了上述任一选项，则增加的费用也必须适用于他添加的任何非骑自行车者，但仅限于成年人（12岁以上），这由下拉列表确定

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

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

我也知道我的jQuery代码重复得很痛苦

Html（简体）：

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

提前感谢您的回复…

类似以下内容：

var price_hotel=100；
风险值价格（前）留=50；
var price_pre_晚餐=20；
函数计算（）{
var nfTot=0，end_total=0；
$（“.nf”）。每个（函数（）{//每个非摩托车手
nfTot+=calcNF（本）；
});
$（'nf#u total'）。文本（nfTot）；
end_total=nfTot+//非骑自行车者
price_hotel+//填写表格的人
（$（'input[name=want\u pre\u stay]'）。是否（“：checked”）？价格为0+
（$（'input[name=want_pre_晚餐]）。是否（“：checked”）？价格（pre_晚餐：0）；
$（'end#u total'）。文本（end#u total）；
}
函数calcNF（nf）{
var nfValue=nf.value；
如果（nfValue==“”）返回0；//此处未选择任何内容
var age=new Date（）.getFullYear（）-nfValue；//从现在开始
如果（年龄<12岁）返回0；
返回价格_酒店+
（$（'input[name=want\u pre\u stay]'）。是否（“：checked”）？价格为0+
（$（'input[name=want\u pre\u dinne]'）。是否（“：checked”）？价格为0；
}
$（函数（）{
$（'price_pre_stay'）.hide（）；
$（'price_pre_晚餐'）.hide（）；
$（'price_hotel'）。文本（price_hotel）；
$（'input[name=want_pre_stay]'）。在（'click'，函数（）{
$（'price_pre_stay'）。切换（this.checked）；
计算（）；
});
$（'input[name=want_pre_晚餐]'）。在（'click'，函数（）{
$（'price_pre_晚餐'）。切换（this.checked）；
计算（）；
});
$（'.nf'）。on（'change'，function（）{
计算（）；
});
});


入住前一晚50


晚餐前一晚20

个人住宿总量（非骑自行车者加入之前）：

非骑车人年龄：
请选择
1934
1935
1936
2014

非骑自行车者的住宿总量：

End total:
你能创建一个jsfiddle.net吗？好的，给我一分钟…jsfiddle:（由于某种原因，下拉菜单不起作用，但你明白了…）你没有定义nf_total-那么我必须单击并更改什么才能看到问题？不仅仅是你需要-=取消点击吗？新提琴：这里下拉菜单也不能正常工作。
<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>

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

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...