Как Показать/скрыть div при выборе radio?

185

22 августа 2018, 20:50

Есть 2 radio "частное лицо" и "фирма". При выборе "фирма" мне надо показать поле для заполнения, а при выборе "частное лицо" это поле скрыть.

$(document).ready(function() { 
  $("input#optionsRadios2").change(function() { 
 
    if ($(this).attr("checked")) { 
      $('#hide').fadeIn().show(); 
      return; 
    } else { 
      $('#hide').fadeOut(300); 
    } 
 
  }); 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="col-xs-12 col-md-6"> 
  <div class="form-reg"> 
    <label> 
                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="checked" style="margin: 0 auto">&nbsp;Osoba prywatna</label> 
    <label> 
                            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" checked="checked" style="margin-left: 10px;">&nbsp;Firma</label> 
  </div> 
  <div class="form-group reg-conto"> 
    <input type="text" placeholder="Imię" class="login-control"> 
    <input type="text" placeholder="Nazwisko" class="login-control"> 
    <div id="hide" style="display:none;"><input type="text" placeholder="Firma" class="firma-conto"></div> 
    <input type="text" placeholder="Ulica" class="ulica-conto"> 
    <input type="text" placeholder="№" class="ulica-numer"> 
    <input type="text" placeholder="Dane adresowe" class="login-control"> 
    <input type="text" placeholder="Kod pocztowy" class="login-control"> 
    <input type="text" placeholder="Miasto" class="login-control"> 
    <input type="text" placeholder="Telefon" class="login-control"> 
    <input type="text" placeholder="E-mail" class="login-control"> 
  </div> 
</div>

При нажатии всё ОК, а при выборе другой блок не скрывается. В чём ошибка? Благодарен за помощь. В js не силён.

Answer 1

Всё правильно, ты ведь создал слушатель только на 2-й радиобаттон, поэтому и изменения происходят только по нажатию на него.

Напиши общий класс для обоих радиобатонов, чтобы событие проиходыло по клику на любой из них, этот класс пропиши обоим радиобаттонам:

$(document).ready(function() { 
  $(".radio_option").change(function() { 
 
    if ($('#optionsRadios2').prop("checked")) { 
      $('#hide').fadeIn(300); 
    } else { 
      $('#hide').fadeOut(300); 
    } 
 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="col-xs-12 col-md-6"> 
  <div class="form-reg"> 
    <label> 
         <input class="radio_option" type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="checked" style="margin: 0 auto">&nbsp;Osoba prywatna</label> 
    <label> 
        <input class="radio_option" type="radio" name="optionsRadios" id="optionsRadios2" value="option2" style="margin-left: 10px;">&nbsp;Firma</label> 
  </div> 
  <div class="form-group reg-conto"> 
    <input type="text" placeholder="Imię" class="login-control"> 
    <input type="text" placeholder="Nazwisko" class="login-control"> 
    <div id="hide" style="display:none;"><input type="text" placeholder="Firma" class="firma-conto"></div> 
    <input type="text" placeholder="Ulica" class="ulica-conto"> 
    <input type="text" placeholder="№" class="ulica-numer"> 
    <input type="text" placeholder="Dane adresowe" class="login-control"> 
    <input type="text" placeholder="Kod pocztowy" class="login-control"> 
    <input type="text" placeholder="Miasto" class="login-control"> 
    <input type="text" placeholder="Telefon" class="login-control"> 
    <input type="text" placeholder="E-mail" class="login-control"> 
  </div> 
</div>

И ещё, почему у тебя атрибут checked="checked" сразу на обоих чекбоксах? Оставь его на том радиобаттоне который должен быть активным по умолчанию, или убери совсем, если по умолчанию они должны быть не активны