Javascript-форум - Показать/Скрыть элемент по радиокнопкам

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Показать/Скрыть элемент по радиокнопкам (https://javascript.ru/forum/dom-window/48262-pokazat-skryt-ehlement-po-radioknopkam.html)

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

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

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=

?

Спасибо!

нашел нечто подобное

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";
 }
}

при выборе радио кнопки поле появляется, при выборе другой кнопки, поле не пропадает, что не так сделал?

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>

:-? а зачем скрипты то нужны для этого?

: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>