Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Вывести сумму атрибутов элемента (https://javascript.ru/forum/events/52159-vyvesti-summu-atributov-ehlementa.html)

mrmen2 06.12.2014 11:47

Вывести сумму атрибутов элемента
 
Здравствуйте, помогите пожалуйста, есть список чекбоксов:

<input type="checkbox" value="12321" name="vote" test="0.2">
<input type="checkbox" value="12321" name="vote" test="1.2">
<input type="checkbox" value="12321" name="vote" test="3">


Подскажите как вывести сумму чисел из атрибута test у выбранных чекбоксов
т.е если пользователь выберет все эти три чекбокса то должно вывести 4.4

Спасибо

рони 06.12.2014 11:51

mrmen2,
а почему нужен дополнительный атрибут а не стандартное value?

mrmen2 06.12.2014 11:54

Цитата:

Сообщение от рони (Сообщение 344904)
mrmen2,
а почему нужен дополнительный атрибут а не стандартное value?

в value должно передаваться другое число, т.е в value ид товара, а в test его цена, серверу нужно передать ид товара, а test нужно для общей стоимости выбранных заказов для отображения пользователю

рони 06.12.2014 12:18

mrmen2,
:cray: пройти циклом проверить checked суммировать данные ...
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>

<input type="checkbox" value="12321" name="vote" test="0.2">
<input type="checkbox" value="12321" name="vote" test="1.2">
<input type="checkbox" value="12321" name="vote" test="3">
<script>
var votes = document.querySelectorAll('[name="vote"]');
function s() {
    var sum = [].reduce.call(document.querySelectorAll(":checked"), function(a, b) {
        a += +b.getAttribute("test");
        return a
    }, 0);
    alert(sum)
}
for (var i = 0; i < votes.length; i++) votes[i].onchange  = s;
</script>
</body>

</html>

danik.js 06.12.2014 12:30

рони, не для продакшна. Вместо поиска по DOM, лучше тестить checked. И почему onclick, а не onchange?
<!DOCTYPE HTML>
 
<html>
 
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>
 
<body>
<input type="checkbox" value="12321" name="vote" data-price="0.2">
<input type="checkbox" value="12321" name="vote" data-price="1.2">
<input type="checkbox" value="12321" name="vote" data-price="3">
<script>
(function(){

	var votes = document.getElementsByName('vote');
	function recalc() {
		var sum = 0;
		for (var i = 0; i < votes.length; i++)
			sum += votes[i].checked ? +votes[i].getAttribute('data-price') : 0;
		alert(sum);
	}
	for (var i = 0; i < votes.length; i++)
		votes[i].onchange = recalc;

})();
</script>
</body>

</html>

рони 06.12.2014 12:40

Цитата:

Сообщение от danik.js
И почему onclick, а не onchange?

одинаково в данном случае ... но вдруг пригодится если кастомизировать например или я ошибаюсь?

danik.js 06.12.2014 12:55

Цитата:

Сообщение от рони
одинаково в данном случае

Так если одинаково, то почему бы не использовать более осмысленный вариант? Кастомизация (через css, label) не влияет.

рони 06.12.2014 12:56

Цитата:

Сообщение от danik.js
более осмысленный

видимо не так мыслю )))

danik.js 06.12.2014 13:02

Ок. Я по табу перешел на чекбокс и нажал на пробел. Произошло событие click. Это логично?

рони 06.12.2014 13:13

danik.js,
благодарю за желание помочь, но видимо моих знаний не хватает понять - считаю что click на 2% надёжнее чем change для checkbox - для формы надёжнее change, поэтому пишу так.


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