Условие для чекбоксов
Здравствуйте форумчане, не кидайте сильно палками, с jQuery не сильно знаком. Нужно сделать одну вещь. Имеется 6 чекбоксов, 3 из них помечены классом. Так вот нужно чтоб при выборе хотя бы одного - цена первого была 15000, а последующих 6000. Я пришел к тому чтоб подсчитывать кол-во чекбоксов из помеченных классом, но мой код не работает. Могли бы Вы его проверить/поправить? Надеюсь на понимание, спасибо!!! Может ошибка что нельзя переменные в массив? Или можно проще все сделать
<div class="header-content-page"> <div class="header-name7">РАСЧЕТ СТОИМОСТИ</div> <div class="header-name7-black">ВЫБОР МОЩНОСТИ</div> <div class="header-main-form"> <div class="btn-group" data-toggle="buttons"> <label class="btn active" id="option-00"> <input type="radio" name="options" id="option-0" value="0" checked> 1 вкладка </label> <label class="btn" id="option-01"> <input type="radio" name="options" id="option-1" value="1"> 2 вкладка </label> <label class="btn" id="option-02"> <input type="radio" name="options" id="option-2" value="2"> 3 вкладка </label> </div> <div class="check-group"> <label id="label-0" class="clearfix" for="check-0"> <input id="check-0" type="checkbox" checked />1й <span class="float-right"></span> </label> <label id="label-1" class="clearfix" for="check-1"> <input id="check-1" type="checkbox" class="discount" />2й <span class="float-right"></span> </label> <label id="label-2" class="clearfix" for="check-2"> <input id="check-2" type="checkbox" class="discount" />3й <span class="float-right"></span> </label> <label id="label-3" class="clearfix" for="check-3"> <input id="check-3" type="checkbox" class="discount" />4й <span class="float-right"></span> </label> <label id="label-4" class="clearfix" for="check-4"> <input id="check-4" type="checkbox" />5й <span class="float-right"></span> </label> <label id="label-5" class="clearfix" for="check-5"> <input id="check-5" type="checkbox" />6й <span class="float-right"></span> </label> </div> </div> $(document).ready(function () { $first = 0; $second = 0; $third = 0; if ($('.discount:checked').length == 1){ first=15000; second=0; third =0; }else if ($('.discount:checked').length == 2){ first=15000; second = 6000; third = 0; } else if($('.discount:checked').length== 3){ first=15000; second = 6000; third = 6000; } console.log('first, second, third') var price = [ [0, first, second, third, 0, 5000], [0, first, second, third, 0, 5000], [0, first, second, third, 0, 5000] ]; function calculate() { var sum = 0; var i = $('.btn.active').find('input:radio[name="options"]').val(); console.log(i); for (var j = 0; j < 6; j++) { if ($('#check-'+String(j)).is(':checked')) { sum += price[i][j]; $('.cxema-'+String(j)).show(); } else { $('.cxema-'+String(j)).hide(); } } sum = String(sum).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 '); console.log('Общая сумма: '+sum); var result = sum + ' руб.'; $('#result .montage').html(result); return sum; } } |
igor.morgunov,
html добавьте. |
добавил html
|
var dsc = $('.discount:checked').length, $first = dsc ? 1500 : 0, $second = dsc > 1 ? 6000 : 0, $third = dsc > 2 ? 6000 : 0; |
Цитата:
|
laimas,
удивляюсь способности ванговать, сам ничего не понимаю, что требуется. :) |
рони,
всякое может быть :) Но вроде правильно - первый в любом случае, второй если два любых, третий если все. |
При выборе одного в массив попадало 15000, второго 15000 + 6000, третьего 15000 + 6000 + 6000
|
Цитата:
|
прошу прощения, запутал. Если один любой - то 15000, если 2 любых, то 15000 + 6000 и три 15000 + 6000 + 6000
|
Тогда как я и написал - используйте для этого тернарный оператор вместо if(...) и кучи определений.
|
igor.morgunov,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { var discount = $(".discount"); discount.change(function() { var len = discount.filter(":checked").length; var result = {0 : 0, 1 : 15000, 2 : 21000, 3 : 27000}[len] $('#result .montage').html(result); }) }); </script> </head> <body> <div class="header-content-page"> <div class="header-name7">РАСЧЕТ СТОИМОСТИ</div> <div class="header-name7-black">ВЫБОР МОЩНОСТИ</div> <div class="header-main-form"> <div class="btn-group" data-toggle="buttons"> <label class="btn active" id="option-00"> <input type="radio" name="options" id="option-0" value="0" checked> 1 вкладка </label> <label class="btn" id="option-01"> <input type="radio" name="options" id="option-1" value="1"> 2 вкладка </label> <label class="btn" id="option-02"> <input type="radio" name="options" id="option-2" value="2"> 3 вкладка </label> </div> <div class="check-group"> <label id="label-0" class="clearfix" for="check-0"> <input id="check-0" type="checkbox" checked />1й <span class="float-right"></span> </label> <label id="label-1" class="clearfix" for="check-1"> <input id="check-1" type="checkbox" class="discount" />2й <span class="float-right"></span> </label> <label id="label-2" class="clearfix" for="check-2"> <input id="check-2" type="checkbox" class="discount" />3й <span class="float-right"></span> </label> <label id="label-3" class="clearfix" for="check-3"> <input id="check-3" type="checkbox" class="discount" />4й <span class="float-right"></span> </label> <label id="label-4" class="clearfix" for="check-4"> <input id="check-4" type="checkbox" />5й <span class="float-right"></span> </label> <label id="label-5" class="clearfix" for="check-5"> <input id="check-5" type="checkbox" />6й <span class="float-right"></span> </label> </div> </div> </div> <div id="result"> <div class="montage"></div> </div> </body> </html> |
а если нужно в зависимости от условий передавать данные в массив т.к. калькулятор уже из массива берет значения
|
Цитата:
|
igor.morgunov,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { var discount = $(".discount"); discount.change(function() { var len = discount.filter(":checked").length; var result = [15000, 6000, 6000].slice(0,len) $('#result .montage').html(JSON.stringify(result)); }) }); </script> </head> <body> <div class="header-content-page"> <div class="header-name7">РАСЧЕТ СТОИМОСТИ</div> <div class="header-name7-black">ВЫБОР МОЩНОСТИ</div> <div class="header-main-form"> <div class="btn-group" data-toggle="buttons"> <label class="btn active" id="option-00"> <input type="radio" name="options" id="option-0" value="0" checked> 1 вкладка </label> <label class="btn" id="option-01"> <input type="radio" name="options" id="option-1" value="1"> 2 вкладка </label> <label class="btn" id="option-02"> <input type="radio" name="options" id="option-2" value="2"> 3 вкладка </label> </div> <div class="check-group"> <label id="label-0" class="clearfix" for="check-0"> <input id="check-0" type="checkbox" checked />1й <span class="float-right"></span> </label> <label id="label-1" class="clearfix" for="check-1"> <input id="check-1" type="checkbox" class="discount" />2й <span class="float-right"></span> </label> <label id="label-2" class="clearfix" for="check-2"> <input id="check-2" type="checkbox" class="discount" />3й <span class="float-right"></span> </label> <label id="label-3" class="clearfix" for="check-3"> <input id="check-3" type="checkbox" class="discount" />4й <span class="float-right"></span> </label> <label id="label-4" class="clearfix" for="check-4"> <input id="check-4" type="checkbox" />5й <span class="float-right"></span> </label> <label id="label-5" class="clearfix" for="check-5"> <input id="check-5" type="checkbox" />6й <span class="float-right"></span> </label> </div> </div> </div> <div id="result"> <div class="montage"></div> </div> </body> </html> |
Работает вроде как надо. Но не пойму как в общий массив загнать
$(function() { var discount = $(".discount"); discount.change(function() { var len = discount.filter(":checked").length; var result = [15000, 6000, 6000].slice(0,len) $('#result .montage').html(JSON.stringify(result)); }) }); var price = [ [0, first, second, third, 0, 5000], [0, first, second, third, 0, 5000], [0, first, second, third, 0, 5000] ]; Калькулятор берет из var price где цены статичны. |
Цитата:
|
Калькулятор и var price - работали до меня и в него нужно складывать те числа из var discount на место соотвествующее порядку input 2,3,4. У меня указано как first, second, third
var price = [ [0, first, second, third, 0, 5000], [0, first, second, third, 0, 5000], [0, first, second, third, 0, 5000] ]; Как это сделать - не понимаю. Надеюсь распутал свои предыдущие объяснения)) |
igor.morgunov,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { var discount = $(".discount"); discount.change(function() { var len = discount.filter(":checked").length; var result = [15000, 6000, 6000].slice(0,len); result.push(0,0,0) result.length = 3; price.forEach(function(el) { [].splice.apply(el, [1,3].concat(result)) }) $('#result .montage').html(JSON.stringify(price)); }) var price = [ [0, 0, 0, 0, 0, 5000], [0, 0, 0, 0, 0, 5000], [0, 0, 0, 0, 0, 5000] ]; }); </script> </head> <body> <div class="header-content-page"> <div class="header-name7">РАСЧЕТ СТОИМОСТИ</div> <div class="header-name7-black">ВЫБОР МОЩНОСТИ</div> <div class="header-main-form"> <div class="btn-group" data-toggle="buttons"> <label class="btn active" id="option-00"> <input type="radio" name="options" id="option-0" value="0" checked> 1 вкладка </label> <label class="btn" id="option-01"> <input type="radio" name="options" id="option-1" value="1"> 2 вкладка </label> <label class="btn" id="option-02"> <input type="radio" name="options" id="option-2" value="2"> 3 вкладка </label> </div> <div class="check-group"> <label id="label-0" class="clearfix" for="check-0"> <input id="check-0" type="checkbox" checked />1й <span class="float-right"></span> </label> <label id="label-1" class="clearfix" for="check-1"> <input id="check-1" type="checkbox" class="discount" />2й <span class="float-right"></span> </label> <label id="label-2" class="clearfix" for="check-2"> <input id="check-2" type="checkbox" class="discount" />3й <span class="float-right"></span> </label> <label id="label-3" class="clearfix" for="check-3"> <input id="check-3" type="checkbox" class="discount" />4й <span class="float-right"></span> </label> <label id="label-4" class="clearfix" for="check-4"> <input id="check-4" type="checkbox" />5й <span class="float-right"></span> </label> <label id="label-5" class="clearfix" for="check-5"> <input id="check-5" type="checkbox" />6й <span class="float-right"></span> </label> </div> </div> </div> <div id="result"> <div class="montage"></div> </div> </body> </html> |
Рони, поможете связать массив с калькулятором?
П.с. я наверное уже достал?)) но что-то не выходит. И 5й пункт показывает 5000 в не зависимости от чекбокса function calculate() { var sum = 0; var i = $('.btn.active').find('input:radio[name="options"]').val(); console.log('i = ' + i); console.log('j = ' + j); for (var j = 0; j < 6; j++) { if ($('#check-'+String(j)).is(':checked')) { sum += price[i][j]; $('.cxema-'+String(j)).show(); } else { $('.cxema-'+String(j)).hide(); } } sum = String(sum).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 '); console.log('Общая сумма: '+sum); var result = sum + ' руб.'; $('#result .montage').html(result); return sum; } Вот сам калькулятор. Я его код не очень понимаю, т.к. повторюсь новичок в этом. Логика при первой вкладке из массива берется первая строка и т.д. Очень надеюсь на помощь |
igor.morgunov,
$(function() { var discount = $(".discount"); discount.change(function() { var len = discount.filter(":checked").length; var result = [15000, 6000, 6000].slice(0,len); result.push(0,0,0) result.length = 3; price.forEach(function(el) { [].splice.apply(el, [1,3].concat(result)) }) }) }); var price = [ [0, 0, 0, 0, 0, 5000], [0, 0, 0, 0, 0, 5000], [0, 0, 0, 0, 0, 5000] ]; function calculate() { var sum = 0; var i = $('.btn.active').find('input:radio[name="options"]').val(); console.log('i = ' + i); console.log('j = ' + j); for (var j = 0; j < 6; j++) { if ($('#check-'+String(j)).is(':checked')) { sum += price[i][j]; $('.cxema-'+String(j)).show(); } else { $('.cxema-'+String(j)).hide(); } } sum = String(sum).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 '); console.log('Общая сумма: '+sum); var result = sum + ' руб.'; $('#result .montage').html(result); return sum; } |
а так порядок сбился. при отметке 3,4,5 идет набор суммы, а должен быть 2,3,4
и при снятии 3 пункта - отнимает 15000, а должно что если один из трех выбран то первый 15000 а последующие 6000 и 4,5 по нулям если 3й не выбран |
Цитата:
Цитата:
я пас, писал выше вашу логику не понимаю. |
Часовой пояс GMT +3, время: 05:24. |