Не получается написать скрипт. Не знаю как его реализовать.
 

<form>
 	<label class="label-custom">
 	<legend class="the-legend">Prosessor:</legend>
		<fieldset class="well the-fieldset">
			<input type="radio" class="radio" id="radio-1" value="400" name="group1"/>
			<label for="radio-1">DT.VMXMC.062	Intel® Core™ i3-6100 (3M Cache, 3.70 GHz)</label>
			<label for="radio-1" class="price-custom">400 azn</label>
			<br /><br />

			<input type="radio" class="radio" id="radio-2" value="300" name="group1"/>
			<label for="radio-2">DT.VMXMC.063	Intel® Core™ i5-6400 (6M Cache, up to 3.30 GHz) </label>
			<h class="price-custom">300 azn</h>
			 <br /><br />

			<input type="radio" class="radio" id="radio-3" value="200" name="group1" />
			<label for="radio-3">DT.VMXMC.064	Intel® Core™ i7-6700 (8M Cache, up to 4.00 GHz)</label> 
   			<h class="price-custom">200 azn</h>
    	</fieldset>
  </label>
  <label class="label-custom">
  <legend class="the-legend">Operativ yaddaş:</legend>
		<fieldset class="well the-fieldset">
			<input type="radio" class="radio" id="radio-4" value="100" name="group2"/>
			<label for="radio-4">RAM 8GB DDRIV</label>
   			<h class="price-custom">100 azn</h>
    	</fieldset>
  </label>
  <label class="label-custom">
  <legend class="the-legend">Daxili yaddaş HDD:</legend>
		<fieldset class="well the-fieldset">
			<input type="radio" class="radio" id="radio-5" value="200" name="group3"/>
			<label for="radio-5">2TB SATA 3.5"</label>
   			<h class="price-custom">200 azn</h>
    	</fieldset>
  </label>
  <label class="label-custom">
  <legend class="the-legend">VGA:</legend>
		<fieldset class="well the-fieldset">
			<input type="radio" class="radio" id="radio-6" value="500" name="group4"/>
			<label for="radio-6">GT 210 1GB 64   bit</label>
			<label for="radio-6" class="price-custom">500 azn</label>
   	<br /><br />
			<input type="radio" class="radio" id="radio-7" value="300" name="group4"/>
			<label for="radio-7">GT 730 2GB 128 bit</label>
   			<label for="radio-7" class="price-custom">300 azn</label>
    	</fieldset>
  </label>
  <label class="label-custom">
  <legend class="the-legend">Monitor:</legend>
		<fieldset class="well the-fieldset">
			<input type="radio" class="radio" id="radio-8" value="100" name="group5"/>
			<label for="radio-8">LCD V206HQLBB</label>
   			<label for="radio-8" class="price-custom">100 azn</label>
    	</fieldset>
  </label>
  <label class="label-custom">
  <legend class="the-legend">OS:</legend>
		<fieldset class="well the-fieldset">
			<input type="radio" class="radio" id="radio-9" value="400" name="group6"/>
			<label for="radio-9">Windows 10 Home</label>
   			<label for="radio-9" class="price-custom">400 azn</label>
    	</fieldset>
  </label>
  <label class="label-custom">
  <legend class="the-legend">MS Office:</legend>
		<fieldset class="well the-fieldset">
			<input type="radio" class="radio" id="radio-10" value="100" name="group7"/>
			<label for="radio-10">Office 365 Personal</label>
   			<label for="radio-10" class="price-custom">100 azn</label>
    	</fieldset>
  </label>
  <label class="label-custom">
  <legend class="the-legend">Antivirus:</legend>
		<fieldset class="well the-fieldset">
			<input type="radio" class="radio" id="radio-11" value="500" name="group8"/>
			<label for="radio-11">Kaspersky Antivirus Base - 2PC</label>
   			<label for="radio-11" class="price-custom">500 azn</label>
   			<br /><br />
   			<input type="radio" class="radio" id="radio-12" value="400" name="group8"/>
			<label for="radio-12">ESET NOD32 Antivirus - 3PC</label>
   			<label for="radio-12" class="price-custom">400 azn</label>
    	</fieldset>
  </label>
  <br/>
  <div class="button-group">
  <button type="submit" class="btn btn-green text-right">В корзину</button>
  <button type="reset" class="btn btn-green text-right">Удалить</button>
  <input type="button" onclick="sums()" value="Подсчитать">
	<br>Сумма:<br>
	<input type="text" name="sumOut" disabled="false" value="">
  </div>
</form>

Вообщем есть такая верстка. Не знаю как надо выбирать элемент из группы. То есть как доставать омеченный. То есть определить, что его отметили? Ну задание по моему, по верстке и так понятно. Нужно чтобы плюсовалась цена выбранных элементов и выводилось их название. А, да, кстати. Позволяет ли JS выводить инфу сразу после того, как я щелкнула радио баттоном (в name="sumOut" например)?

Или чтобы изменения отображались сразу в какой-нибудь div-е никуда не щёлкая мне нужно воспользоваться jquery?

да конечно событие "change" или "input" тут подойдут
Код сейчас гляну

совсем не обязательно, ванильный JS умеет все!

Darth_Pandora,
читал запрос по поводу "скриптиков простых", но кто торговать у вас будет?

laimas, Есть одна "компания". 6-ть товаров на весь сайт. По-этому и нужно что-нибудь попроще =) Не хочу связываться с цмс-ками. Там слишком много лишнего. Их "контент манагер" потонет в настройках.

Шесть товаров и уже компания? Крутая компания, ничего не скажешь. ) Но как бы то ни было, кто будет торговать этими товарами, компания или браузер?

Ещё какая "крутая". Вот даже сайт заказали :) Эх, Пелевина напомнило...

Браузер ни чем торговать не будет) Просто нужен каталог с возможностью добавлять в корзину и что б пользователь мог отправлять заявку на эмайл.

Значит компания. А теперь представьте что на улице не 2017, а ледниковый период - html и интернет есть, а javascript нет. Но тем не менее без последнего можно торговать, отправив форму с выбором серверу.

Посмотрите внимательно на свою форму и ответьте на вопрос - можно ли таковой формой понять серверу что выбирается и покупается?

Вы имеете ввиду что у меня action у form не назначен? Ну это ведь пока тестовый вариант.

Нет, браузер его просто примет равным текущему адресу. Подумайте о полях таблицы и чем эта форма (то есть какими данными) будет обмениваться с сервером. Вот в этом вопросе полная лажа. Вы понимая, что торговать должна фирма, в тоже время не делаете для этого ничего.

Например 6 атомных подводных лодок... :D
Попробуй продай без сайта!

Можно поподробнее?

Вот допустим, у меня есть форма. Она получает данные из базы. Пользователь выбирает нужные импуты и получается сумма. Эта сумма если клиент щёлкает на добавить в корзину заносится в корзину. Объясните мне пожалуйста, что ни так, может я туплю. Я просто не понимаю к чему вы клоните.

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="utf-8">
</head>
<body>
	<form>
		<label class="label-custom">
			<legend class="the-legend">Prosessor:</legend>
			<fieldset class="well the-fieldset">
				<input type="radio" class="radio" id="radio-1" value="400" name="group1"/>
				<label for="radio-1">DT.VMXMC.062	Intel® Core™ i3-6100 (3M Cache, 3.70 GHz)</label>
				<label for="radio-1" class="price-custom">400 azn</label>
				<br /><br />

				<input type="radio" class="radio" id="radio-2" value="300" name="group1"/>
				<label for="radio-2">DT.VMXMC.063	Intel® Core™ i5-6400 (6M Cache, up to 3.30 GHz) </label>
				<h class="price-custom">300 azn</h>
				<br /><br />

				<input type="radio" class="radio" id="radio-3" value="200" name="group1" />
				<label for="radio-3">DT.VMXMC.064	Intel® Core™ i7-6700 (8M Cache, up to 4.00 GHz)</label> 
				<h class="price-custom">200 azn</h>
			</fieldset>
		</label>
		<label class="label-custom">
			<legend class="the-legend">Operativ yaddaş:</legend>
			<fieldset class="well the-fieldset">
				<input type="radio" class="radio" id="radio-4" value="100" name="group2">
				<label for="radio-4">RAM 8GB DDRIV</label>
				<h class="price-custom">100 azn</h>
			</fieldset>
		</label>
		<label class="label-custom">
			<legend class="the-legend">Daxili yaddaş HDD:</legend>
			<fieldset class="well the-fieldset">
				<input type="radio" class="radio" id="radio-5" value="200" name="group3"/>
				<label for="radio-5">2TB SATA 3.5"</label>
				<h class="price-custom">200 azn</h>
			</fieldset>
		</label>
		<label class="label-custom">
			<legend class="the-legend">VGA:</legend>
			<fieldset class="well the-fieldset">
				<input type="radio" class="radio" id="radio-6" value="500" name="group4"/>
				<label for="radio-6">GT 210 1GB 64   bit</label>
				<label for="radio-6" class="price-custom">500 azn</label>
				<br /><br />
				<input type="radio" class="radio" id="radio-7" value="300" name="group4"/>
				<label for="radio-7">GT 730 2GB 128 bit</label>
				<label for="radio-7" class="price-custom">300 azn</label>
			</fieldset>
		</label>
		<label class="label-custom">
			<legend class="the-legend">Monitor:</legend>
			<fieldset class="well the-fieldset">
				<input type="radio" class="radio" id="radio-8" value="100" name="group5"/>
				<label for="radio-8">LCD V206HQLBB</label>
				<label for="radio-8" class="price-custom">100 azn</label>
			</fieldset>
		</label>
		<label class="label-custom">
			<legend class="the-legend">OS:</legend>
			<fieldset class="well the-fieldset">
				<input type="radio" class="radio" id="radio-9" value="400" name="group6"/>
				<label for="radio-9">Windows 10 Home</label>
				<label for="radio-9" class="price-custom">400 azn</label>
			</fieldset>
		</label>
		<label class="label-custom">
			<legend class="the-legend">MS Office:</legend>
			<fieldset class="well the-fieldset">
				<input type="radio" class="radio" id="radio-10" value="100" name="group7"/>
				<label for="radio-10">Office 365 Personal</label>
				<label for="radio-10" class="price-custom">100 azn</label>
			</fieldset>
		</label>
		<label class="label-custom">
			<legend class="the-legend">Antivirus:</legend>
			<fieldset class="well the-fieldset">
				<input type="radio" class="radio" id="radio-11" value="500" name="group8"/>
				<label for="radio-11">Kaspersky Antivirus Base - 2PC</label>
				<label for="radio-11" class="price-custom">500 azn</label>
				<br /><br />
				<input type="radio" class="radio" id="radio-12" value="400" name="group8"/>
				<label for="radio-12">ESET NOD32 Antivirus - 3PC</label>
				<label for="radio-12" class="price-custom">400 azn</label>
			</fieldset>
		</label>
		<br/>
		<div class="button-group">
			<button type="submit" class="btn btn-green text-right">В корзину</button>
			<button type="reset" class="btn btn-green text-right">Удалить</button>
			<input type="button" onclick="sums()" value="Подсчитать">
			<br>Сумма:<br>
			<input type="text" name="sumOut" disabled="false" value="">
		</div>
	</form>
	<script>
		function summ(){
			var input = document.querySelectorAll("form input");
			var price =[];
			for (i=0; i< input.length; i++) {
				if (input[i].checked) {
					price.push(input[i].value);
				}
			}
			var sum = 0;
			for(var i=0; i<price.length; i++){
				sum = sum + parseFloat(price[i]);
			}
			document.getElementsByName('sumOut')[0].value =sum ;
		}
		document.addEventListener("change", summ);
	</script>
</body>
</html>

Только я бы если честно это все нахрен переделал бы на вашем месте
1) где одиночная радиокнопка там нужен чекбокс, ато никак не отменить выбор,
2) в остальные поставить "НЕТ" тоже для отмены выбора.
или сделайте лучше селектами.

j0hnik,
это полная чушь.

У вас товары описаны в базе, что является первичным в этом описании?

Вам заказали работу, причем ответственную, связанную с деньгами, а вас даже нет представления о том как же должна производится эта торговля.

Да это просто пример как сумму получить.
автор спросил: "Позволяет ли JS выводить инфу сразу после того, как я щелкнула радио баттоном"
ну буду же я тут в тестовом окне делать полноценный интернет магазин:-/

У меня всё будет описано в базе. Но пока клиент хочет увидеть каркас. Вёрстку того, как это будет выглядеть.
laimas, И вообще, хватит меня гнобить. Не боги горшки обжигают. Я знаю свои пробелы и потихоньку учу js. Если у вас есть какой-то дельный совет я с удовольствием прислушаюсь к нему.

j0hnik,
1) где одиночная радиокнопка там нужен чекбокс, ато никак не отменить выбор,
Да, спасибо, вы правы, я что-то в начале не сообразила
2) в остальные поставить "НЕТ" тоже для отмены выбора.
или сделайте лучше селектами.
Об этом я подумала, но решила, что кнопочка RESET решает =)
3. А вы не подскажете как сделать так, что б рядом с суммой перечислялись ещё названия выбранных товаров?

laimas,
ах, и да. Это не магазин. То чем является эта форма это довесок (кастомизация) к товару.

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

Я вас не гноблю, и не я являюсь исполнителем заказа, так что мне по большому счету все равно. Но вы сразу делаете ошибку фатальную для магазина, и JS тут боком, он к этому отношения не имеет.

Такое впечатление, что вы где-то копирку "под магазин" нашли, так как уже не впервой такое представление торговли здесь показывается. Словно при этом вы реальные магазины вообще ни разу не посещали, а ведь там все ответы как нужно торговать.

да точно так же только не нужно складывать значения, получаем массив выбранных с названием например "name" -> выводим

document.getElementsByName('sumOut')[0].value =sum+" "+name;

Пожалуйста вы можете написать свой вариант. :yes:
У вас есть такая возможность!

Я не занимаюсь писаниной бесполезного, а в случае интернет магазина даже вредного, кода. Но потренироваться можете и на абстрактных флажках, то что у вас написано, это слишком. )

А может просто и не знаете как как проще ;)

Вас вернуть к вашей теме, где вы пытались формировать почтовое отправление, не понимая в чем же у вас проблемы?

Прежде чем складывать, нужно хорошо понимать что. Вы как и автор этой темы не понимаете того, что еще руки не дошли до JS, а в концепцию торговли этого интернет-магазина заложена огромная брешь.

Не волнуйтесь, я прекрасно знаю арифметику, но это не означает, что начну тягаться с вами в "красноречии скриптов". Все что вы пишите, и что не имеет отношения действительно грамотной торговле, просто понос. Не делайте этого.

laimas друг мой Вдох... выдох... вдох.. выдох..

j0hnik,
я предупреждал, вежливо - "не надо поноса", иначе пеняйте на себя. ;)

Вы все слишком близко принимаете к сердцу... хоть веб суров и беспощаден, но здоровье у нас одно! :victory:

laimas,
Концепцию торговли мы могли бы обсудить с вами в другой раз. Сейчас же я попросила конкретного ответа на свой вопрос. Как сделать что-то на js так как нуб в нём. От вас ответа на свой вопрос я не получила.
j0hnik,
С name я немного не поняла. Вы предлагаете их по name обходить?
Но ведь при помощи name связываются input в fieldset

Например name="group8" в этой строке например

<fieldset class="well the-fieldset">
				<input type="radio" class="radio" id="radio-11" value="500" name="group8"/>
				<label for="radio-11">Kaspersky Antivirus Base - 2PC</label>
				<label for="radio-11" class="price-custom">500 azn</label>
				<br /><br />
				<input type="radio" class="radio" id="radio-12" value="400" name="group8"/>
				<label for="radio-12">ESET NOD32 Antivirus - 3PC</label>
				<label for="radio-12" class="price-custom">400 azn</label>
			</fieldset>

name это просто название переменной! можете назвать как вам больше нравится.

Darth_Pandora,
товаром распоряжается фирма. Это означает, что она должна вести их учет, приниматься заказы, отправлять их.
Это означает, что всякие расчеты на клиенте, это сугубо для клиента. Сервер же (то есть магазин, владелец товаров) просто обязан все данные извне проверять и все расчеты производить сам. А для того чтобы он мог понять какой товар покупают, ему формой должна передаваться не цена товара, а то, что идентифицирует товар, причем индивидуально каждый, то есть нечто уникальное.

Отключаем JS при этом, а магазин будет продолжать работать исправно. Другими словами - в вашем магазине данные, это так, нечто несерьезное, а ведь это основа, не только для информации, но и для контроля. НУ а далее и неверное представление товаров формой, а значит и не то считаем, а самое плохое, это не понимаем для чего считаем.

Это есть концепция. Если вы сможете в реальном магазине товар ценой 3000 руб. купить за 30 руб., тогда я соглашусь с вами, что я не прав.

j0hnik,
Мне неудобно вас снова просить, но не могли бы вы написать как это будет в коде?
А то у меня что-то не получается(

function summ(){
			var input = document.querySelectorAll("form input");
			var price =[];
			var name =[];
			for (i=0; i< input.length; i++) {
				if (input[i].checked) {
					price.push(input[i].value);
					name.push(input[i].nextElementSibling.innerText);
				}
			}
			var sum = 0;
			for(var i=0; i<price.length; i++){
				sum = sum + parseFloat(price[i]);
			}
			document.getElementsByName('sumOut')[0].value = sum+" "+name ;
		}
		document.addEventListener("change", summ);

да тут просто строчку одно добавить надо было.

laimas,
Согласна с вами. Хотя пока мне нужно просто показать как это будет выглядеть внешне. Ни макет в фотошопе, а именно живой пример, где можно понажимать на кнопочки посмотреть как это будет чисто внешне. Насчет того, что проверка данных должна происходить не на стороне клиента опять таки, согласна с вами. Не надо рассматривать мою тестовую версию как что-то окончательное.

j0hnik, А если мне потребуется вывести в div я не смогу сделать так, да?

document.getElementById('sumOutr')[0].value = sum+" "+name ;

<div id="sumOutr"></div>

Сможете value поменяйте на innerHTML

По идее так, правильно? Только он что-то не работает

<script>
		function summ(){
			var input = document.querySelectorAll("form input");
			var price =[];
			var name =[];
			for (i=0; i< input.length; i++) {
				if (input[i].checked) {
					price.push(input[i].innerHTML);
					name.push(input[i].nextElementSibling.innerText);
				}
			}
			var sum = 0;
			for(var i=0; i<price.length; i++){
				sum = sum + parseFloat(price[i]);
			}
			//document.getElementsByName('sumOut')[0].value = sum+" "+name ;
			document.getElementById('sumOutr')[0].innerHTML = sum+" "+name ;
		}
		document.addEventListener("change", summ);
	</script>

<div id="sumOutr"></div>

Нет вот так.

function summ(){
			var input = document.querySelectorAll("form input");
			var price =[];
			var name =[];
			for (i=0; i< input.length; i++) {
				if (input[i].checked) {
					price.push(input[i].value);
					name.push(input[i].nextElementSibling.innerText);
				}
			}
			var sum = 0;
			for(var i=0; i<price.length; i++){
				sum = sum + parseFloat(price[i]);
			}
			//document.getElementsByName('sumOut')[0].value = sum+" "+name ;
			document.getElementById('sumOutr').innerHTML = sum+" "+name ;
		}
		document.addEventListener("change", summ);

т.к по id обращаемся [0] тут не нужен
а price.push(input[i].value); трогать не надо, это мы получаем данные, а не выводим

А javascript тут причем?

А что вы тестируете? j0hnik, включил дурку и понеслося... :)

Допустим, фирма настолько проста, что весь магазин это одна единственная страница на которой 6 товаров и флажки для их выбора. Бог с вами, считайте value выбранных флажков, хотя это свойство флажков должно содержать не цену, а идентификатор товара. Да делайте что хотите, в конечном итоге ведь страдать буду не я, а ваш заказчик.

Но если все таки есть страницы подробного описания товара, на которые можно совершать переход. Будучи на этой странице пользователь также может добавлять/удалять товара в/из корзины, а вы подсчетами чего увлекаетесь?

Может этот последний вопрос все-таки заставит вас задуматься и вы в конце концов поймете, что начиная уже с формы что-то не так.

j0hnik, спасибо, вы меня очень выручили :)

laimas,
Да поняла я уже, что считать надо на стороне сервера, php скриптом, запихнуть какой-нибудь уникальный ид каждому товару, потом этот ид на сервер к пхп, потом выводить при помощи ajax-са в хтмл. Так?
Да, я знаю, что сейчас делаю бесполезную с точки зрения ценности работу, но клиент захотел увидеть как это будет плюсоваться. (Вот такое у него желание) А как известно работодатель всегда прав.