сумма отмеченых чекбоксов

[imediasun1]

Здравствуйте, уважаемые форумчане, помогите пожалуйста разобраться с задачей, есть форма в которой отмечаются условия размещения объявления, там есть селект показывающий колличество месяцев и чекбоксы показывающие дополнительные рекламные опции, стоимость дополнительной опции за месяц- это значение чекбокса.
Стоимость размещения обявления в месяц без дополнительных опций 1 грн в месяц.

<p><label>Период размещения</label>&nbsp;&nbsp;
<select id="period" name="period">
<option value="0" disabled>Выберите период размещения</option>
<option value="1"selected="selected">1 месяц</option>
<option value="3">3 месяца</option>
<option value="6">6 месяцев</option>
<option value="9">9 месяцев</option>
<option value="12">1 год</option>
</select>
&nbsp;&nbsp;	Стоимость Вашего объявления составляет <span style="font-weight:bold"></span></p>
<p>Вы можете воспользоваться дополнительными рекламными опциями для продвижения своего товара</p>

<input type="checkbox" name="bold_label" value="3" class="add_check"><label class="text">Жирный заголовок</label><br>

<input type="checkbox" name="light"value="8"class="add_check"><label class="text">Подсветка</label><br>

<input type="checkbox" name="start"value="14"class="add_check"><label class="text">Начало списка</label><br>

<input type="checkbox" name="category_page"value="25"class="add_check"><label class="text">Страница категории</label><br>

<input type="checkbox" name="main_page"value="59"class="add_check"><label class="text">Главная страница Пинокио</label><br>

Как сделать так чтобы в (.name_good_area p span) отображалась сумма (значений выбранных чекбоксов умноженных на колличество месяцев) то есть например клиент выбирает период размещения 3 месяца, и как дополнительные опции начало списка и страница категории, необходимо чтобы отобразилось такое число == (стоимость объявления 1 грн в месяц * на 3 месяца )+(стоимость дополнительной опции начало списка == 14 грн * 3месяца)+(стоимость дополнительной опции страница категории == 25грн*3 месяца)=120грн. Пробовал написать сам логики математической не хватает, помогите кто может

<script>
var period=$('#period').val();
$('.name_good_area p span').text(' '+period*1+' грн.');
$('#period').change(function(){
$('.name_good_area p span').text(' '+period*1+' грн.');
});

$('.add_check').change(function(){
if ($(this).prop("checked")){
var add_check = $(this). val();
var add_check_period = parseInt(add_check)*parseInt(period);
var add_check_period_plus_period = parseInt(add_check_period)+parseInt(period);
$('.name_good_area p span').text(' '+add_check_period_plus_period+' грн.');
}
});
</script>

Это выдает только значение выбранного одного чекбокса + стоимость объявления в месяц
Для наглядности предпоследний раздел формы стоимость объявления http://pinokio.in.ua/pages/show/sale

[ОлегА]

<p><label>Период размещения</label>&nbsp;&nbsp;
<select id="period" name="period">
<option value="0" disabled>Выберите период размещения</option>
<option value="1"selected="selected">1 месяц</option>
<option value="3">3 месяца</option>
<option value="6">6 месяцев</option>
<option value="9">9 месяцев</option>
<option value="12">1 год</option>
</select>
&nbsp;&nbsp;  Стоимость Вашего объявления составляет <span id="total_sum" style="font-weight:bold"></span></p>
<p>Вы можете воспользоваться дополнительными рекламными опциями для продвижения своего товара</p>

<input type="checkbox" name="bold_label" value="3" class="add_check"><label class="text">Жирный заголовок</label><br>

<input type="checkbox" name="light"value="8" class="add_check"><label class="text">Подсветка</label><br>

<input type="checkbox" name="start"value="14" class="add_check"><label class="text">Начало списка</label><br>

<input type="checkbox" name="category_page"value="25" class="add_check"><label class="text">Страница категории</label><br>

<input type="checkbox" name="main_page"value="59" class="add_check"><label class="text">Главная страница Пинокио</label><br>

$(function(){
  var period=$('#period').val();
  var total_sum = period*1;
  $('#total_sum').text(' '+total_sum+' грн.');
  $('.add_check:checked').each(function(){
      sumary(this, $(this).val() )
  })

  $('#period').change(function(){
    period = $(this).val();
    total_sum = period*1;

    $('.add_check:checked').each(function(){
      sumary(this, $(this).val() )
    })

    $('#total_sum').text(' '+total_sum+' грн.');
  });


  $('.add_check').change(function(){
    sumary(this, $(this).val() )
  });

  function sumary(_this, val){
      add_check_period = parseInt(val)*parseInt(period);
      if ( $(_this).is(":checked") ){
        total_sum = add_check_period + total_sum
      } else {
        total_sum = total_sum - add_check_period
      }

      $('#total_sum').text(' '+total_sum+' грн.');
  }
})

[imediasun1]

Спасибо большое, все работает

[рони]

imediasun1,
Вариант покороче ...

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<p><label>Период размещения</label>&nbsp;&nbsp;
<select id="period" name="period">
<option value="0" disabled>Выберите период размещения</option>
<option value="1"selected="selected">1 месяц</option>
<option value="3">3 месяца</option>
<option value="6">6 месяцев</option>
<option value="9">9 месяцев</option>
<option value="12">1 год</option>
</select>
&nbsp;&nbsp;	Стоимость Вашего объявления составляет <span style="font-weight:bold"></span></p>
<p>Вы можете воспользоваться дополнительными рекламными опциями для продвижения своего товара</p>

<input type="checkbox" name="bold_label" value="3" class="add_check"><label class="text">Жирный заголовок</label><br>

<input type="checkbox" name="light"value="8"class="add_check"><label class="text">Подсветка</label><br>

<input type="checkbox" name="start"value="14"class="add_check"><label class="text">Начало списка</label><br>

<input type="checkbox" name="category_page"value="25"class="add_check"><label class="text">Страница категории</label><br>

<input type="checkbox" name="main_page"value="59"class="add_check"><label class="text">Главная страница Пинокио</label><br>
<script>
$("#period, .add_check").change(function () {
    var b = $("#period").val() | 0,
        a = 1;
    $(".add_check:checked").each(function () {
        a += $(this).val() | 0
    });
    $("span").html(a * b + " \u0433\u0440\u043d")
});
$('#period').change()
</script>
</body>
</html>

[animhotep]

убил пол часа разбираясь как работает подразрядное или)
выходит в данном случае | 0 выступает заменой parseInt

рони, а это чтоб писать меньше или есть ещё какие-то отличия?

[рони]

это чтоб писать меньше или есть ещё какие-то отличия?

в данном случае одинаково

[animhotep]

ясно, спасибо