Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Увеличение результата при выборе чекбокса (https://javascript.ru/forum/misc/71080-uvelichenie-rezultata-pri-vybore-chekboksa.html)

Евгенион 25.10.2017 07:46
Увеличение результата при выборе чекбокса
 
Добрый день! Недавно мне на форуме уважаемый 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>

laimas 25.10.2017 07:58
Евгенион,
а может ли быть одновременный выбор и "да", и "нет"?

Sigizmund2012 25.10.2017 08:21 
$(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);
	});
});

Евгенион 25.10.2017 10:41
Спасибо за помощь, все отлично работает!)

Dilettante_Pro 25.10.2017 11:16
Евгенион,
А как оно может отлично работать?
Как правильно заметил laimas,
Цитата:
Сообщение от laimas
а может ли быть одновременный выбор и "да", и "нет"?
В HTML-коде странные строки 04, 20, 21 - учитывая то, что чекбокс может принимать два значения - Да/Нет

Vlasenko Fedor 25.10.2017 12:57
вариант на js :dance: 
<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>

ruslan_mart 26.10.2017 04:20
Цитата:
Сообщение от Poznakomlus
var cur = e ? e.target : window.event.srcElement
Цитата:
Сообщение от Poznakomlus
[].reduce.call
:)

Vlasenko Fedor 26.10.2017 11:32
ruslan_mart,
у меня нет под руками ИЕ9
что там есть e.target?

Nexus 27.10.2017 09:46
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...мечания

Vlasenko Fedor 27.10.2017 10:54
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>


Часовой пояс GMT +3, время: 14:18.