2

Есть 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 не силён.

1 ответ 1

4

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

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

$(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" сразу на обоих элементах? Оставь его на том радиобаттоне, который должен быть активным по-умолчанию, или убери совсем, если по умолчанию они должны быть не активны

2
  • Спасибо, Анатолий. Поясните пожалуйста строку $('#hide').fadeIn(300);. Что он даёт? Получается так, что .show можно было не писать.
    – Amice
    Commented 5 июл. 2018 в 14:18
  • fadaIn(300) показывает блок плавно из прозрачности (300 - это время появления, чем больше, тем дольше появляется), а show() показывает его моментально. Не забудь поставить галочку под вопросом ;) Удачи Commented 5 июл. 2018 в 14:34

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.