Вход

Просмотр полной версии : Показать/Скрыть элемент по радиокнопкам

Slavok47
27.06.2014, 07:05
Привет ребят! Делал форму на чекбоксах, задача такая: нажал чекбокс, появилось текстовое поле, но не учел момента, чекбоксов можно выбрать несколько, а это не допустимо, использовал

function agreeForm1(f) {
if (f.cat1.checked) f.add_cat.hidden = false
else f.add_cat.hidden = true
}
function agreeForm2(f) {
if (f.cat2.checked) f.edit_cat.hidden = false
else f.edit_cat.hidden = true
}

поэтому тут нужно использовать радиокнопки, но так как группа использует одинаковый name эта функция не подходит, видимо нужен доступ по ID, прошу помощи у специалистов

Возможно ли сделать проще, например к каждой радиокнопки привязать onClick c прямым описанием события на показ/скрытие элемента (тоесть на изменение значения hidden), типа

onClick="document.getElementById('IDt').hidden=?

Спасибо!
MallSerg
27.06.2014, 09:27
http://javascript.ru/forum/search.php?searchid=1570315
Slavok47
27.06.2014, 12:35
нашел нечто подобное

function agreeForm1(tar) {
var element = document.getElementById(tar);
if (element) {
element.style.display = element.style.display = "block";
}
else {

element.style.display = element.style.display = "none";
}
}

при выборе радио кнопки поле появляется, при выборе другой кнопки, поле не пропадает, что не так сделал?
Brutus
27.06.2014, 16:20
Slavok47,

<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<input type="radio" name="r1" id="r1" class="r1"><label for="r1">#-1</label><br>
<input type="radio" name="r1" id="r2" class="r1"><label for="r2">#-2</label><br>
<input type="radio" name="r1" id="r3" class="r1"><label for="r3">#-3</label><br>
<input type="radio" name="r1" id="r4" class="r1"><label for="r4">#-4</label><br>

<textarea id="txt" style="display:none;">1</textarea>
<textarea id="txt2" style="display:none;">4</textarea>
<script>
var inp = document.getElementsByClassName('r1');
var txt = document.getElementById('txt');
var txt2 = document.getElementById('txt2');
function func (elm) {
if (elm.id == "r1" && elm.checked)
txt.style.display = "block";
else
txt.style.display = "none";

if (elm.id == "r4" && elm.checked)
txt2.style.display = "block";
else
txt2.style.display = "none";
}

for (var i=0;i<inp.length;i++){
inp[i].onchange = function () {func(this)};
}

</script>

</body>
</html>
рони
28.06.2014, 12:33
:-? а зачем скрипты то нужны для этого?
рони
28.06.2014, 12:44
:write:
<!DOCTYPE HTML>

<html>

<head>
<title>Untitled</title>
<style type="text/css">
input:checked + label {
display: inline-block;
}
label{
display: none;
}

</style>
</head>

<body>
<input type="radio" name="r1" id="r1" class="r1" checked="checked"><label for="r1">#-1</label><br>
<input type="radio" name="r1" id="r2" class="r1"><label for="r2">#-2</label><br>
<input type="radio" name="r1" id="r3" class="r1"><label for="r3">#-3</label><br>
<input type="radio" name="r1" id="r4" class="r1"><label for="r4">#-4</label><br>

</body>

</html>