просмотров:21889 | комметариев: 9
JQuery как выбрать значения отмеченых чек и радио боксов

Рассмотрим случай когда на странице расположены группы радиобоксов и чек боксов, например некий прайс. Нужно приклике на элементе, просчитать итоговую сумму. Как здесь например (цены взяты с "потолка", любые совпадения случайны :-) )

Цены на дизайн сайта:

- 20000 руб
- 30000 руб
- 50000 руб

Програмная часть сайта:

- 9000 руб
- 2000 руб
- 6000 руб

Стоимость сайта - руб.

Бла-бла-бла, наш менеджер в ближайшее время НЕ свяжется с вами :-)

Заказать есчо!!!

Как это закодировано:

<form action="" method="post" id="order"> <h1>Цены на дизайн сайта:</h1> <input type="radio" name="price[dz]" class="price" value="20000" /> Постой дизайн - <span> 20000 руб</span><br/> <input type="radio" name="price[dz]" class="price" value="30000" /> Дизайн корпоративного сайта - <span>30000 руб</span><br/> <input type="radio" name="price[dz]" class="price" value="50000" /> Дизайн промо-сайта - <span>50000 руб </span><br/> <h1> Програмная часть сайта: </h1> <input type="checkbox" name="price[pr][cms]" class="price" value="9000" /> Система управления сайтом - <span>9000 руб </span><br/> <input type="checkbox" name="price[pr][mail]" class="price" value="2000" /> Форма отправки писем - <span>2000 руб</span><br/> <input type="checkbox" name="price[pr][news]" class="price" value="6000" /> Лента новостей - <span>6000 руб</span> <p>Стоимость сайта - <input id="sum" type="text" name="price[sum]" value="0" readonly="" /> руб. </p> <input type="submit" value="Заказать" /> </form> <script> $('.price').click(function(){ var sum = 0; var arr = $('input.price:checked'); arr.each(function(index, el){ var pr = el.value; sum += parseFloat(pr); }); $('#sum').val(sum); }) </script>

Разберем работу скрипта.

По клику на любой из инпутов с классом price выполняются следующие действия
1. Объявляем переменную sum
2. Выгребаем в массив arr все отмеченные инпуты
3. Проходимся по всем элементам массива с помошью each, при этом считываем в переменную pr значение элемента и затем плюсуем к переменной sum
4. Присваиваем найденное значение суммы элементу с идентификатором sum

Как видите, все просто и понятно

просмотров:21889 | комметариев: 9
OKeй
04 марта 2011, 01:03
Класс! Не думал что это так просто!
Вася
29 сентября 2014, 16:56
Ваще то что я искал!!!!!!!!!!!!!!!!!!!!!!!!!
СПАСИБО!!!!!!!!!!!!!!!!!!
Саша
19 мая 2015, 12:09
Парень ты решил мучение в 3 часа мои... а оказалось так просто. Я реально другой стороной пошел и мог бы решить но это сам понимал что бред. Спасибо тебе!
Джони
23 июня 2015, 23:37
Просто и ясно! Большое спасибо!
Кирилл
06 августа 2015, 02:24
Спасибо, хорошая заметка
Илья
03 декабря 2015, 15:35
Просто и гениально, это должно быть в первой строке поиска!
Спасибо!
Olga
09 августа 2016, 03:01
Шикарный код! Спасибо огромное
Евгений
26 ноября 2016, 22:10
Огромное спасибо автору! я чуть голову не сломал над этим.
Семен
16 января 2017, 13:18
Просто класс! Спасибо!!!
просмотров:21889 | комметариев: 9

Оставить комментарий:    

Ваше имя:
 
Текст комментария:
 
+ 1 =  

Возможно вам будет интересно:

HighLoad++