Подсчёт нажатых и рамка для не нажатых radioinput
Мне нужно джава скрипт который всего лиш навсего водсчитывал valu и выводил их в в форму. но с посчётом проблем какраз и нет. Проблема в том чтоб нечекнутые инпуты обвести красной рамкой , типа напоминание пользователю что их все таки надо нажать . В разметки у меня 5 груп радио инпутов , из каждой групы хотябе один должен быть выбран , а если нет то красная рамка. Несмотря на то что звучит достаточно просто решыть эту заадачку нетак просто и инфы в нете пр это нет.
<h3> Вопрос_1 </h3>
<div>
<input type="radio" id="r1" value="1" name="vopros_1" /> <input type="radio" id="r2" value="1"/ name="vopros_1" > <input type="radio" id="r3" value="1" name="vopros_1"/>
<br />
<label for="r1" > Ответ 1 </label> <label for="r2" > Ответ 2 </label> <label for="r3"> Ответ 3 </label>
<br />
</div>
<h3> Вопрос 2 </h3>
<div>
<input type="radio" value="2" id="r4" name="vopros_2"/> <input type="radio" id="r5" value="2" name="vopros_2" /> <input type="radio" id="r6" value="2" name="vopros_2" />
<br />
<label for="r4"> Ответ 1 </label> <label for="r5"> Ответ 2 </label> <label for="r6"> Ответ 3 </label>
<br />
</div>
<h3> Вопрос 3 </h3>
<div>
<input type="radio" id="r7" value="3" /> <input type="radio" id="r8" value="3" /> <input type="radio" id="r9" value="3" />
<br />
<label for="r7"> Ответ 1 </label> <label for="r8"> Ответ 2 </label> <label for="r9"> Ответ 3 </label>
<br />
</div>
<h3> Вопрос 4 </h3>
<div>
<input type="radio" value="4" id="r10" /> <input type="radio" id="r11" value="4"/> <input type="radio" id="r12" value="4" />
<br />
<label for="r10"> Ответ 1 </label> <label for="r11"> Ответ 2 </label> <label for="r12"> Ответ 3 </label>
<br />
</div>
<h3> Вопрос 5 </h3>
<div>
<input type="radio" id="r13" value="5" /> <input type="radio" id="r14" value="5" /> <input type="radio" id="r15" value="5" />
<br />
<label for="r13"> Ответ 1 </label> <label for="r14"> Ответ 2 </label> <label for="r15"> Ответ 3 </label>
<br />
</div>
<input type="button" onclick="sums()" value="Подсчитать">
<br>Сумма:<br>
<input type="text" name="sumOut" disabled="false" value="">
</form>
вот сам скрипт
function sums() {
sum=0;
for(i=1;i<16;i++) {
var elem=document.getElementById("r"+i);
if (elem.checked) {
sum=sum+parseInt(elem.value);
} else {
elem.parentNode.className += "MyClass";
}
}
document.formText.sumOut.value=sum;
}
В условие else пытался создать либо див с стилем красной рамки, либо создавал див заранее всем элементам и присваивал скриптом клас з заранее созданным стилем и не одни из этих подходов нормально не работал. Я недавно изучаю ява-скрипт 2 недели и буду очень признателен за любую помощь в этой задачке. |
Jason_smith,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Jason_smith,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.MyClass {
border: #FF0000 2px solid;
}
</style>
</head>
<body>
<form name="formText" id="formText">
<h3>Вопрос_1</h3>
<div>
<input type="radio" id="r1" value="1" name="vopros_1">
<input type="radio" id="r2" value="1" name="vopros_1">
<input type="radio" id="r3" value="1" name="vopros_1">
<br>
<label for="r1">Ответ 1</label>
<label for="r2">Ответ 2</label>
<label for="r3">Ответ 3</label>
<br>
</div>
<h3>Вопрос 2</h3>
<div>
<input type="radio" value="2" id="r4" name="vopros_2">
<input type="radio" id="r5" value="2" name="vopros_2">
<input type="radio" id="r6" value="2" name="vopros_2">
<br>
<label for="r4">Ответ 1</label>
<label for="r5">Ответ 2</label>
<label for="r6">Ответ 3</label>
<br>
</div>
<h3>Вопрос 3</h3>
<div>
<input type="radio" id="r7" value="3" name="vopros_3">
<input type="radio" id="r8" value="3" name="vopros_3">
<input type="radio" id="r9" value="3" name="vopros_3">
<br>
<label for="r7">Ответ 1</label>
<label for="r8">Ответ 2</label>
<label for="r9">Ответ 3</label>
<br>
</div>
<h3>Вопрос 4</h3>
<div>
<input type="radio" value="4" id="r10" name="vopros_4">
<input type="radio" id="r11" value="4" name="vopros_4">
<input type="radio" id="r12" value="4" name="vopros_4">
<br>
<label for="r10">Ответ 1</label>
<label for="r11">Ответ 2</label>
<label for="r12">Ответ 3</label>
<br>
</div>
<h3>Вопрос 5</h3>
<div>
<input type="radio" id="r13" value="5" name="vopros_5">
<input type="radio" id="r14" value="5" name="vopros_5">
<input type="radio" id="r15" value="5" name="vopros_5">
<br>
<label for="r13">Ответ 1</label>
<label for="r14">Ответ 2</label>
<label for="r15">Ответ 3</label>
<br>
</div>
<input type="button" onclick="sums()" value="Подсчитать">
<br> Сумма:
<br>
<input type="text" name="sumOut" disabled="false" value="">
</form>
<script>
function sums() {
var sum = 0,
i, cls = "MyClass";
for (i = 1; i < 16; i++) {
var elem = document.getElementById("r" + i);
if (elem.checked) {
sum = sum + parseInt(elem.value);
cls = ""
}
if (!(i % 3)) {
elem.parentNode.className = cls;
cls = "MyClass"
}
}
document.formText.sumOut.value = sum
};
</script>
</body>
</html>
|
Спасибо:)
|
| Часовой пояс GMT +3, время: 08:53. |