Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.10.2017, 07:46
Новичок на форуме
Отправить личное сообщение для Евгенион Посмотреть профиль Найти все сообщения от Евгенион
 
Регистрация: 20.10.2017
Сообщений: 5

Увеличение результата при выборе чекбокса
Добрый день! Недавно мне на форуме уважаемый ksa очень помог, и вот набравшись, нагл... смелости решил спросить еще.

Есть такая задача, необходимо получать сумму значений активированных чекбоксов и она решена, а вот при выборе одного из них необходимо что бы вся получившаяся сумма увеличивалась на 20%
Назначил класс dvadtsatiprocentov, но как его прикрутить что бы только при активации этого чекбокса срабатывало Увеличение результата при выборе чекбокса на 20% не пойму никак.

Подскажите пожалуйста, что я делаю не так.
Сейчас просто считает плюс 20%, а не по выбору чекбокса с классом dvadtsatiprocentov.

Заранее благодарен всем откликнувшимся.


<div id="price">
	<ul>
		<li><input type="checkbox" name="regcalc" value="4000" />Нет</li>
		<li><input type="checkbox" name="regcalc" value="0" />Да</li>
		<li><input type="checkbox" name="regcalc" value="10000" />Общая система</li>
		<li><input type="checkbox" name="regcalc" value="5000" />Усно 6%</li>
		<li><input type="checkbox" name="regcalc" value="8000" />Усно 15%</li>
		<li><input type="checkbox" name="regcalc" value="1000" />1-10</li>
		<li><input type="checkbox" name="regcalc" value="3000" />11-30</li>
		<li><input type="checkbox" name="regcalc" value="9000" />31-50</li>
		<li><input type="checkbox" name="regcalc" value="15000" />51-70</li>
		<li><input type="checkbox" name="regcalc" value="18000" />71-90</li>
		<li><input type="checkbox" name="regcalc" value="22000" />91-110</li>
		<li><input type="checkbox" name="regcalc" value="25000" />111-130</li>
		<li><input type="checkbox" name="regcalc" value="28000"/>1-5</li>
		<li><input type="checkbox" name="regcalc" value="28000"/>6-10</li>
		<li><input type="checkbox" name="regcalc" value="28000"/>11-15</li>
		<li><input type="checkbox" name="regcalc" value="28000"/>16-20</li>
		<li><input type="checkbox" name="regcalc" value="28000"/>21-25</li>
		<li><input type="checkbox" name="regcalc" value="0"/>нет</li>
		<li><input class="dvadtsatiprocentov"  type="checkbox" name="regcalc" value="0" />Да</li>
	</ul>
	<div class="result" id="sum">0</div>
	</div>

<script src='https://code.jquery.com/jquery-latest.js'></script>
	
		<script language="JavaScript" type="text/javascript">
$(function() {
	$("#price").click(function() {
		var sum = 0; 
		$('#price :checked').each(function() {
			sum += parseInt($(this).val());
		});
		
		var pro = 0; 
		$('#price :checked').each(function() {
			pro += parseInt($(this).val())/5;
		});
		
		$('#sum').text(sum+pro);
	});
});
</script>

Последний раз редактировалось Евгенион, 25.10.2017 в 08:09.
Ответить с цитированием
  #2 (permalink)  
Старый 25.10.2017, 07:58
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Евгенион,
а может ли быть одновременный выбор и "да", и "нет"?
Ответить с цитированием
  #3 (permalink)  
Старый 25.10.2017, 08:21
Аватар для Sigizmund2012
Профессор
Отправить личное сообщение для Sigizmund2012 Посмотреть профиль Найти все сообщения от Sigizmund2012
 
Регистрация: 16.07.2014
Сообщений: 267

$(function() {
	$("#price").on("click", function() {
		var sum = 0;
		var pro = 0;
		$("#price :checked").each(function() {
			sum += parseInt($(this).val());
		});
		if ($("#price .dvadtsatiprocentov").prop("checked")) {
			pro = sum / 5; // или sum * 0.2
		}

		$("#sum").text(sum + pro);
	});
});

Последний раз редактировалось Sigizmund2012, 25.10.2017 в 08:28.
Ответить с цитированием
  #4 (permalink)  
Старый 25.10.2017, 10:41
Новичок на форуме
Отправить личное сообщение для Евгенион Посмотреть профиль Найти все сообщения от Евгенион
 
Регистрация: 20.10.2017
Сообщений: 5

Спасибо за помощь, все отлично работает!)
Ответить с цитированием
  #5 (permalink)  
Старый 25.10.2017, 11:16
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Евгенион,
А как оно может отлично работать?
Как правильно заметил laimas,
Сообщение от laimas
а может ли быть одновременный выбор и "да", и "нет"?
В HTML-коде странные строки 04, 20, 21 - учитывая то, что чекбокс может принимать два значения - Да/Нет
Ответить с цитированием
  #6 (permalink)  
Старый 25.10.2017, 12:57
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

вариант на js
<div id="price">
	<ul>
		<li><input type="checkbox" name="regcalc" value="4000" />Нет</li>
		<li><input type="checkbox" name="regcalc" value="0" />Да</li>
		<li><input type="checkbox" name="regcalc" value="10000" />Общая система</li>
		<li><input type="checkbox" name="regcalc" value="5000" />Усно 6%</li>
		<li><input type="checkbox" name="regcalc" value="8000" />Усно 15%</li>
		<li><input type="checkbox" name="regcalc" value="1000" />1-10</li>
		<li><input type="checkbox" name="regcalc" value="3000" />11-30</li>
		<li><input type="checkbox" name="regcalc" value="9000" />31-50</li>
		<li><input type="checkbox" name="regcalc" value="15000" />51-70</li>
		<li><input type="checkbox" name="regcalc" value="18000" />71-90</li>
		<li><input type="checkbox" name="regcalc" value="22000" />91-110</li>
		<li><input type="checkbox" name="regcalc" value="25000" />111-130</li>
		<li><input type="checkbox" name="regcalc" value="28000"/>1-5</li>
		<li><input type="checkbox" name="regcalc" value="28000"/>6-10</li>
		<li><input type="checkbox" name="regcalc" value="28000"/>11-15</li>
		<li><input type="checkbox" name="regcalc" value="28000"/>16-20</li>
		<li><input type="checkbox" name="regcalc" value="28000"/>21-25</li>
		<li><input type="checkbox" name="regcalc" value="0"/>нет</li>
		<li><input class="dvadtsatiprocentov"  type="checkbox" name="regcalc" value="0" />Да</li>
	</ul>
	<div class="result" id="sum">0</div>
	</div>
<script>
price.onclick = function(e) {
  var cur = e ? e.target : window.event.srcElement;
  if ( "INPUT" === cur.tagName) {
    var res = [].reduce.call(this.querySelectorAll('input:checked'), function(a, b) {
      return a + parseInt(b.value)
    }, 0);
    this.querySelector('.dvadtsatiprocentov:checked') && (res *= 1.2);
    sum.innerHTML = res;
  }
};
</script>
Ответить с цитированием
  #7 (permalink)  
Старый 26.10.2017, 04:20
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

Сообщение от Poznakomlus
var cur = e ? e.target : window.event.srcElement
Сообщение от Poznakomlus
[].reduce.call
Ответить с цитированием
  #8 (permalink)  
Старый 26.10.2017, 11:32
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

ruslan_mart,
у меня нет под руками ИЕ9
что там есть e.target?
Ответить с цитированием
  #9 (permalink)  
Старый 27.10.2017, 09:46
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

Poznakomlus, вероятно ruslan_mart имел ввиду, что в случае с e.target вы "позаботились" о IE, а на метод "reduce" внимания не обратили.
Метод "reduce" поддерживается только с 9-й версии IE.
https://developer.mozilla.org/en-US/..._compatibility

IE с 9-й версии должен поддерживать и event.target.
https://developer.mozilla.org/ru/doc...мечания
Ответить с цитированием
  #10 (permalink)  
Старый 27.10.2017, 10:54
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

ok, уменьшим код на одну строку совместимость от ie9
<div id="price">
	<ul>
		<li><input type="checkbox" name="regcalc" value="4000" />Нет</li>
		<li><input type="checkbox" name="regcalc" value="0" />Да</li>
		<li><input type="checkbox" name="regcalc" value="10000" />Общая система</li>
		<li><input type="checkbox" name="regcalc" value="5000" />Усно 6%</li>
		<li><input type="checkbox" name="regcalc" value="8000" />Усно 15%</li>
		<li><input type="checkbox" name="regcalc" value="1000" />1-10</li>
		<li><input type="checkbox" name="regcalc" value="3000" />11-30</li>
		<li><input type="checkbox" name="regcalc" value="9000" />31-50</li>
		<li><input type="checkbox" name="regcalc" value="15000" />51-70</li>
		<li><input type="checkbox" name="regcalc" value="18000" />71-90</li>
		<li><input type="checkbox" name="regcalc" value="22000" />91-110</li>
		<li><input type="checkbox" name="regcalc" value="25000" />111-130</li>
		<li><input type="checkbox" name="regcalc" value="28000"/>1-5</li>
		<li><input type="checkbox" name="regcalc" value="28000"/>6-10</li>
		<li><input type="checkbox" name="regcalc" value="28000"/>11-15</li>
		<li><input type="checkbox" name="regcalc" value="28000"/>16-20</li>
		<li><input type="checkbox" name="regcalc" value="28000"/>21-25</li>
		<li><input type="checkbox" name="regcalc" value="0"/>нет</li>
		<li><input class="dvadtsatiprocentov"  type="checkbox" name="regcalc" value="0" />Да</li>
	</ul>
	<div class="result" id="sum">0</div>
	</div>
<script>
price.onclick = function(e) {
  if ( "INPUT" === e.target.tagName) {
    var res = [].reduce.call(this.querySelectorAll('input:checked'), function(a, b) {
      return a + parseInt(b.value)
    }, 0);
    this.querySelector('.dvadtsatiprocentov:checked') && (res *= 1.2);
    sum.innerHTML = res;
  }
};
</script>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрывать и делать необязательной часть формы при выборе вариантов Colorado Элементы интерфейса 6 31.07.2017 11:10
Скрывать/показывать блок при выборе нескольких checkbox ru.scr Javascript под браузер 2 26.01.2017 01:23
При выборе даты в datepicker страница перезагружается wfjs jQuery 2 08.01.2016 18:47
Выделение строки <select> при выборе checkbox DarkMaster13 Общие вопросы Javascript 4 14.04.2014 03:30
при выборе в 1-ом select соот.-щая инф. отображается в другом select celencer Общие вопросы Javascript 1 24.05.2009 20:38