сумма отмеченых чекбоксов
Здравствуйте, уважаемые форумчане, помогите пожалуйста разобраться с задачей, есть форма в которой отмечаются условия размещения объявления, там есть селект показывающий колличество месяцев и чекбоксы показывающие дополнительные рекламные опции, стоимость дополнительной опции за месяц- это значение чекбокса.
Стоимость размещения обявления в месяц без дополнительных опций 1 грн в месяц. <p><label>Период размещения</label> <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> Стоимость Вашего объявления составляет <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> <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> Стоимость Вашего объявления составляет <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,
Вариант покороче ... :write:
<!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>
<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>
Стоимость Вашего объявления составляет <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>
|
убил пол часа разбираясь как работает подразрядное или)
выходит в данном случае | 0 выступает заменой parseInt рони, а это чтоб писать меньше или есть ещё какие-то отличия? |
Цитата:
|
ясно, спасибо
|
| Часовой пояс GMT +3, время: 22:26. |