Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Подстветка radiobutton (https://javascript.ru/forum/dom-window/26136-podstvetka-radiobutton.html)

coldb 27.02.2012 16:22
Подстветка radiobutton
 
Пытаюсь приукрасить radiobutton, чтоб выбранный более чётко отличался визуально. Создал функцию, определяющую выбранный radio. В цикле попытался изменить цвет выбранного и сделать одинаковыми цвет остальных. Подскажите пожалуйста где допущены ошибки

<html>
<head>
<script>
function sel()
{
var inputs = document.getElementsByName("labeled");
for (var i = 0; i < inputs.length; i++)
{
document.getElementsById('i').style.backgroundColo r='red';
if (inputs[i].checked)
{
document.getElementsById('i').style.backgroundColo r='blue';
}
}
}
</script>
</head>
<body>
<form>
<p id="1"><input type="radio" name="labeled" onClick="sel()"/></p>
<p id="2"><input type="radio" name="labeled" onClick="sel()"/></p>
<p id="3"><input type="radio" name="labeled" onClick="sel()"/></p>
</form>
</body>
</html>

Rootpassword 27.02.2012 16:34
Зачем JS? Стилями делайте.

nikita.mmf 27.02.2012 18:16
document.getElementsById('i'), уберите кавычки

coldb 28.02.2012 12:41
К сожалению кавычки тут не причем

coldb 28.02.2012 12:45
Цитата:
Сообщение от Rootpassword (Сообщение 160232)
Зачем JS? Стилями делайте.
Можно поподробней? какой псевдокласс использовать?

Сделал следующее

<style>
p:hover {
background-color: #efefef;
}

p {
margin: 0;
padding: 0;
clear: both;
}
label {
display: block;
padding: 0.5em 0.5em 0.5em 2em;
}
input:checked { background-color:#F00 }
input {
float: left;
position: relative;
top: 0.5em;
left: 0.5em;
}

</style>

<p ><input type="radio" name="labeled" id="1"/><label for="1">Раз</label></p>
<p ><input type="radio" name="labeled" id="2"/><label for="2">Два</label></p>
<p ><input type="radio" name="labeled" id="3"/><label for="3">Три</label></p>

Стало красивее, но как изменить цвет тега <p> при выборе соответствующего radio разобраться не могу :(

рони 28.02.2012 16:20
coldb,
Цитата:
Сообщение от coldb
getElementsById
нет такого свойства и ('i') кавычки ненужны и ещё нет у вас элемента с id = 0

рони 28.02.2012 16:20
coldb,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.


Часовой пояс GMT +3, время: 18:55.