сумма отмеченых чекбоксов
Здравствуйте, уважаемые форумчане, помогите пожалуйста разобраться с задачей, есть форма в которой отмечаются условия размещения объявления, там есть селект показывающий колличество месяцев и чекбоксы показывающие дополнительные рекламные опции, стоимость дополнительной опции за месяц- это значение чекбокса.
Стоимость размещения обявления в месяц без дополнительных опций 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, время: 14:25. |