Форум

Slavok47 · #1 (**permalink**) 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 · #2 (**permalink**) 27.06.2014, 09:27

http://javascript.ru/forum/search.php?searchid=1570315

Slavok47 · #3 (**permalink**) 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 · #4 (**permalink**) 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>

рони · #5 (**permalink**) 28.06.2014, 12:33

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

рони · #6 (**permalink**) 28.06.2014, 12:44

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

Форум

Справочник

Discord чат

Курсы javascript