JS калькулятор value c нескольких групп radio
Требуется помощь.
Пытаюсь разобраться в js и начал изучать совсем недавно. Нужно написать простой калькулятор который будет суммировать value из разных групп radio и выводить в документ "на лету" - определяя checked кнопок. Условие - кнопки в форму подгружаются динамически в процессе onload страницы, и их количество может быть разным, как и количество групп кнопок может быт разным. Что то подобное видел на сайте apple на странице выбора конфигурации гаджета. Написал простенькую форму и попытался к ней написать скрипт, но так ничего и не заработало. Вот то что лежит в body...
<div>калькулятор</div><br/>
<form name="radioForm" onclick="getRadioGroupValue(this)">
<input type="radio" name="group1" value="0">z<br>
<input type="radio" name="group1" value="1">a<br>
<input type="radio" name="group1" value="2">b<br>
<input type="radio" name="group1" value="3">c<br>
<input type="radio" name="group1" value="4">d<br>
<br>
<input type="radio" name="group2" value="10">d<br>
<input type="radio" name="group2" value="20">f<br>
<input type="radio" name="group2" value="30">g<br>
<input type="radio" name="group2" value="40">h<br>
<br>
</form>
<SCRIPT LANGUAGE="JavaScript">
function getRadioGroupValue(radioGroupObj)
{
for (var i=0; i < radioGroupObj.length; i++)
if (radioGroupObj[i].checked) return radioGroupObj[i].value;
return null;
var v1 = getRadioGroupValue(document.radioForm.group1);
var v2 = getRadioGroupValue(document.radioForm.group2);
var total= 1000+v1+v2;
document.getElementById("result").innerHTML=total;
}
</SCRIPT>
<div id="result">0</div>
Прошу ткнуть в ошибку и разьяснить - что именно напутал. :blink: |
function getRadioGroupValue(radioGroupObj)
{
var val = 0;
for (var i=0; i < radioGroupObj.length; i++)
if (radioGroupObj[i].checked){
val+=+radioGroupObj[i].value;
}
var total= 1000+val;
document.getElementById("result").innerHTML=total;
}
|
T-sh, спасибо за подсказку..., да так намного эстетичнее, и всё работает.
Вот если бы вы ещё растолковали новичку, почему мой код не работал?... это поможет мне понять где хромает моя логика. :) |
Цитата:
for (var i=0; i < radioGroupObj.length; i++)
if (radioGroupObj[i].checked) return radioGroupObj[i].value;
...
в цикле, после найденного выбранного радиобокса возвращается его значение, только возвращается оно не в переменную, и не в память, а непонятно куда, а потом вы объявляете переменные v1 и v2, до которых дело вообще не доходит, ибо цикл завершен :) после строчки return null; у вас ничего не работает. обращение к значениям выбранных радиобоксов должно быть только в теле цикла, по схеме: нашли — прибавили и т.д. :) |
Спасибо, ещё раз!
Всё понятно и доступно растолковали. Жаль не могу вам ещё один раз плюсануть... ничего - я ещё вернусь... ;) |
<table width="650" border="0" cellspacing="5" cellpadding="0">
<tr>
<td>Виды печатей</td>
<td>За 1 день</td>
<td>Срочно</td>
<td>Срочно после 20:00</td>
</tr>
<tr>
<td><p>Простая печать</p>
<p> </p></td>
<td><input type="radio" onMouseDown="this.isChecked=this.checked;" onClick="this.checked=!this.isChecked;" value="400" name="prostayapechat" />400</td>
<td><input type="radio" onMouseDown="this.isChecked=this.checked;" onClick="this.checked=!this.isChecked;" value="600" name="prostayapechat" />600</td>
<td> </td>
</tr>
<tr>
<td><p>Автоматическая печать</p>
<p> </p></td>
<td><input type="radio" onMouseDown="this.isChecked=this.checked;" onClick="this.checked=!this.isChecked;" value="750" name="avtopechat" />750</td>
<td><input type="radio" onMouseDown="this.isChecked=this.checked;" onClick="this.checked=!this.isChecked;" value="950" name="avtopechat" />950</td>
<td> </td>
</tr>
<tr>
<td colspan="2">Файл-вложение</td>
<td colspan="2"><input type="file" /></td>
</tr>
<tr>
<td colspan="2">Организационная форма</td>
<td colspan="2"> <select name="orgform">
<option value="ООО">OOO</option>
<option value="ЗАО">ЗАО</option>
<option value="ИП">ИП</option>
</select></td>
</tr>
<tr>
<td colspan="2">Город</td>
<td colspan="2"><input type="checkbox" value="Москва" name="gorod1" />Москва <input type="text" name="gorod" /></td>
</tr>
<tr>
<td colspan="4" align="center" id="total_price" style="color: #993300;font-weight:bold; font-size:14px">0</td>
</tr>
</table>
Тут дело такое, в моей форме есть и checkbox с буквенным значением и подсчет сбивается, как делать, чтобы подсчет велся только определенных групп кнопок по имени. Необходимо обрабатывать некоторые name="....", а не все подряд... T-sh Подскажите пожалуйста! |
решение подсчета
Цитата:
function getRadioGroupValue(radioGroupObj)
{
var val = 0;
for (var i=0; i < radioGroupObj.length; i++)
if (radioGroupObj[i].checked && radioGroupObj[i].className == "summed"){
val+=+radioGroupObj[i].value;
}
var total= 0+val;
document.getElementById("total_price").innerHTML=total;
|
|
| Часовой пояс GMT +3, время: 01:05. |