Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.07.2017, 18:44
Интересующийся
Отправить личное сообщение для Foknik Посмотреть профиль Найти все сообщения от Foknik
 
Регистрация: 11.03.2017
Сообщений: 14

простой калькулятор с помощью checkbox
Добрый день, уважаемые форумчане гуру javascript & jquery!
У меня просьба направить на правильный путь новичка!
Я верстальщик и недавно начал учить javascript & jquery!
Сверстал калькулятор где имеются чекбоксы и поля select.

Нужно сделать так что при клике по checkbox и выбора определенного поля select автоматически менялась цена без клика по кнопке.
с селектами я разобрался а вот с checkbox немогу!
Нужно добиться чтобы слаживались несколько переменных которые меняются в зависимости от состояния checked самого чекбокса!
Выложу кусочек кода помогите пожалуйста!!!

Код:
$('.for-services').change(function(){
   $select = $('select#select option:selected').attr('data-service');
   // тут я выбираю данные option поля select; 
});

$('#check_1').click(function() {
   var $result
   if ( this.checked ) {
	// если checked ...
   $result = 6;
    console.log($result);
	} else {
	   $result = 0;
	   console.log($result);
       };
});

$('#check_2').click(function() {
    var $result_2
    if ( this.checked ) {
	// если checked ...
	$result_2 = 8;
	console.log($result_2);
	 } else {
	     $result_2 = 0;
	     console.log($result_2);
	 };
});
	
$final_prise = parseInt($select) + parseInt($total) + parseInt($total_2);
	console.log($final_prise);
	$('span#total').text($final_prise);
});
Не складываются переменные в одну общую ( $final_prise = parseInt($select) + parseInt($total) + parseInt($total_2); ) ни в консоли не складываются не выводятся в елемент span
console.log($final_prise); $('span#total').text($final_prise);

Что не так просвятите подскажите пожалуйста очень буду благодарен!!!
Ответить с цитированием
  #2 (permalink)  
Старый 10.07.2017, 18:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

Foknik,
напишите отдельную одну функцию для установки и сложения всех переменных.
и замените все click и change на неё.
Ответить с цитированием
  #3 (permalink)  
Старый 10.07.2017, 19:05
Интересующийся
Отправить личное сообщение для Foknik Посмотреть профиль Найти все сообщения от Foknik
 
Регистрация: 11.03.2017
Сообщений: 14

То-есть функции click и change прийдется убрать вообще?
Можете написать пример ? Пожалуйста!!!??
Ответить с цитированием
  #4 (permalink)  
Старый 10.07.2017, 19:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

Foknik,
рисуйте ваши 4 элемента, на всякий случай кнопка
Ответить с цитированием
  #5 (permalink)  
Старый 10.07.2017, 19:24
Интересующийся
Отправить личное сообщение для Foknik Посмотреть профиль Найти все сообщения от Foknik
 
Регистрация: 11.03.2017
Сообщений: 14

Вот ссылка на визульный вид калькулятора
http://cimbalyuk.esy.es/
Работает только выбор Доп. услуги и 2 первые чекбокса До 5 и До 10 остальные неподключал еще так как небыло смысла

Последний раз редактировалось Foknik, 10.07.2017 в 19:27.
Ответить с цитированием
  #6 (permalink)  
Старый 10.07.2017, 19:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

Foknik,
...
Ответить с цитированием
  #7 (permalink)  
Старый 10.07.2017, 20:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

Foknik,
<script>
    $(function() {
    function calc() {
        var $select = +$("select#select option:selected").data("service");
        var $price_2 = $("input#check_2:checked").length ? +$("input#check_2:checked").data("price") : 0;
        var $price_3 = $("input#check_3:checked").length ? +$("input#check_3:checked").data("price") : 0;
        var $final_prise = $select + $price_2 + $price_3;
        $("span#total").text($final_prise)
    }
    $("select#select, input#check_2, input#check_3").change(calc)
});
  </script>
Ответить с цитированием
  #8 (permalink)  
Старый 11.07.2017, 02:55
Интересующийся
Отправить личное сообщение для Foknik Посмотреть профиль Найти все сообщения от Foknik
 
Регистрация: 11.03.2017
Сообщений: 14


Спасибооо!!!!!!
Выручили!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Простой калькулятор Valentinushka Элементы интерфейса 3 10.01.2016 20:29
Простой калькулятор под Joomla 3.3 artvasya Общие вопросы Javascript 0 24.02.2015 20:04
Калькулятор с помощью data-атрибутов mr__brainwash Events/DOM/Window 7 12.08.2014 17:22
Простой калькулятор AlexFoxx Events/DOM/Window 12 18.02.2014 15:41
Переключение checkbox с помощью toggle Viper jQuery 1 03.09.2012 15:22