Javascript.RU

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

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

<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,332

mrmen2,
а почему нужен дополнительный атрибут а не стандартное value?
Ответить с цитированием
  #3 (permalink)  
Старый 06.12.2014, 11:54
Новичок на форуме
Отправить личное сообщение для mrmen2 Посмотреть профиль Найти все сообщения от mrmen2
 
Регистрация: 06.12.2014
Сообщений: 5

Сообщение от рони Посмотреть сообщение
mrmen2,
а почему нужен дополнительный атрибут а не стандартное value?
в value должно передаваться другое число, т.е в value ид товара, а в test его цена, серверу нужно передать ид товара, а test нужно для общей стоимости выбранных заказов для отображения пользователю
Ответить с цитированием
  #4 (permalink)  
Старый 06.12.2014, 12:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,332

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>

Последний раз редактировалось рони, 06.12.2014 в 15:13.
Ответить с цитированием
  #5 (permalink)  
Старый 06.12.2014, 12:30
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

рони, не для продакшна. Вместо поиска по 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,332

Сообщение от danik.js
И почему onclick, а не onchange?
одинаково в данном случае ... но вдруг пригодится если кастомизировать например или я ошибаюсь?
Ответить с цитированием
  #7 (permalink)  
Старый 06.12.2014, 12:55
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от рони
одинаково в данном случае
Так если одинаково, то почему бы не использовать более осмысленный вариант? Кастомизация (через css, label) не влияет.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #8 (permalink)  
Старый 06.12.2014, 12:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,332

Сообщение от danik.js
более осмысленный
видимо не так мыслю )))
Ответить с цитированием
  #9 (permalink)  
Старый 06.12.2014, 13:02
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Ок. Я по табу перешел на чекбокс и нажал на пробел. Произошло событие click. Это логично?
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #10 (permalink)  
Старый 06.12.2014, 13:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,332

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменить класс родительского элемента STyLe Общие вопросы Javascript 1 29.05.2014 20:21
Посчитать кол-во div и вывести сумму. djonA Общие вопросы Javascript 11 27.05.2013 08:45
Замена DOM элемента другим элементом MaxXxaM Events/DOM/Window 5 04.05.2013 01:24
как обратиться к items элемента из другого элемента и изменить его? Krepkii ExtJS 2 12.02.2013 13:53
Как то можно узнать ID HTML элемента вызвавшего JavaScript функцию? Opusel Events/DOM/Window 1 18.12.2011 17:36