Форум

mrmen2 · #1 (**permalink**) 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

Спасибо

рони · #2 (**permalink**) 06.12.2014, 11:51

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

mrmen2 · #3 (**permalink**) 06.12.2014, 11:54

Сообщение от рони

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

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

рони · #4 (**permalink**) 06.12.2014, 12:18

mrmen2,

пройти циклом проверить 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 · #5 (**permalink**) 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>

рони · #6 (**permalink**) 06.12.2014, 12:40

Сообщение от danik.js

И почему onclick, а не onchange?

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

danik.js · #7 (**permalink**) 06.12.2014, 12:55

Сообщение от рони

одинаково в данном случае

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

рони · #8 (**permalink**) 06.12.2014, 12:56

Сообщение от danik.js

более осмысленный

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

danik.js · #9 (**permalink**) 06.12.2014, 13:02

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

рони · #10 (**permalink**) 06.12.2014, 13:13

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

Форум

Справочник

Discord чат

Курсы javascript