如何使用单选检查使 div 出现和消失？ [复制]

Question

所以我正在制作一个在线表单并添加了两个单选按钮，我希望在单击第二个单选按钮时出现一个 div，并在单击第一个单选按钮时使 div 消失。我成功地做到了，但我似乎无法弄清楚如何对其进行动画处理以使其看起来更令人愉悦。

这是html代码：

                    <div class="form-group">
                        <div class="form-row">
                            <div class="col-md-2"></div>
                            <div class="col-md-4">
                                <div class="custom-control custom-radio">
                                <input type="radio" id="customRadio1" name="studOldNew" class="custom-control-input" checked="checked">
                                <label class="custom-control-label" for="customRadio1" style="font-size: 18px!important;">Old Student</label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="custom-control custom-radio">
                                <input type="radio" id="customRadio2" name="studOldNew" class="custom-control-input">
                                <label class="custom-control-label" for="customRadio2" style="font-size: 18px!important;">New Student/Transfer In</label>
                                </div>
                            </div>
                            <div class="col-md-2"></div>
                        </div>
                    </div>
                    <div class="form-group" id="newStud" style="display: none;">
                        <div class="form-row">
                            <div class="col-md-6">
                                <label for="inputTextBox" style="font-weight: 500; font-size: 18px!important;">Name of Previous School</label>
                                <input type="text" class="form-control" id="inputTextBox" aria-describedby="nameHelp" placeholder="Enter firstname" name="pname" required maxlength="50">
                            </div>
                            <div class="col-md-6">
                                <label for="inputTextBox2" style="font-weight: 500; font-size: 18px!important;">Address of Previous School</label>
                                <input type="text" class="form-control" id="inputTextBox2" aria-describedby="nameHelp" placeholder="Enter lastname" name="padd" required maxlength="50">
                            </div>
                        </div>
                    </div>

这是我的 js：

var radio_h = document.getElementById("customRadio1");
                        var radio = document.getElementById("customRadio2");

                        radio.onchange = function() {
                          if (radio.checked === true) {
                            document.getElementById("newStud").style.display = "block";
                          }
                        }

                        radio_h.onchange = function() {
                            if (radio_h.checked === true) {
                                document.getElementById("newStud").style.display = "none";
                            }
                        }

Answer 1

我建议你为此使用 animated.css。 的用法只是将 css 引入您的项目并在 class 中编写动画类型。你可以使用很多动画类型https://daneden.github.io/animate.css/

var radio_h = document.getElementById("customRadio1");
                        var radio = document.getElementById("customRadio2");

                        radio.onchange = function() {
                          if (radio.checked === true) {
                            document.getElementById("newStud").style.display = "block";
                          }
                        }

                        radio_h.onchange = function() {
                            if (radio_h.checked === true) {
                                document.getElementById("newStud").style.display = "none";
                            }
                        }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" rel="stylesheet"/>

 <div class="form-group animated slideInDown">
                        <div class="form-row">
                            <div class="col-md-2"></div>
                            <div class="col-md-4">
                                <div class="custom-control custom-radio">
                                <input type="radio" id="customRadio1" name="studOldNew" class="custom-control-input" checked="checked">
                                <label class="custom-control-label" for="customRadio1" style="font-size: 18px!important;">Old Student</label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="custom-control custom-radio">
                                <input type="radio" id="customRadio2" name="studOldNew" class="custom-control-input">
                                <label class="custom-control-label" for="customRadio2" style="font-size: 18px!important;">New Student/Transfer In</label>
                                </div>
                            </div>
                            <div class="col-md-2"></div>
                        </div>
                    </div>
                    <div class="form-group animated slideInLeft" id="newStud" style="display: none;">
                        <div class="form-row">
                            <div class="col-md-6">
                                <label for="inputTextBox" style="font-weight: 500; font-size: 18px!important;">Name of Previous School</label>
                                <input type="text" class="form-control" id="inputTextBox" aria-describedby="nameHelp" placeholder="Enter firstname" name="pname" required maxlength="50">
                            </div>
                            <div class="col-md-6">
                                <label for="inputTextBox2" style="font-weight: 500; font-size: 18px!important;">Address of Previous School</label>
                                <input type="text" class="form-control" id="inputTextBox2" aria-describedby="nameHelp" placeholder="Enter lastname" name="padd" required maxlength="50">
                            </div>
                        </div>
                    </div>

Answer 2

您可以使用 jQuery 轻松完成，但我添加了同时使用 jQuery/VanilaJS 的代码。请看答案here。
使用 jQuery

/* -- USING JQUERY -- */
$('input[type=radio][name=studOldNew]').on('change', function() {
    console.log('change:: ', $(this).val())
  switch ($(this).val()) {
    case 'old':
      $('#newStud').fadeOut();
      break;
    case 'new':
      $('#newStud').fadeIn();
      break;
  }
});

使用 VanilaJS

/* -- USING VANILA JS*/
var radios = document.querySelectorAll("input[type=radio][name=studOldNew]");
radios.forEach(r => {
    r.addEventListener("change", function(e) {
      var target = e.target;
    switch (target.value) {
      case 'old':
        document.getElementById('newStud').style.opacity = 0;
        setTimeout(() => {
            document.getElementById('newStud').style.visibility = 'hidden';
        }, 1000)
        break;
      case 'new':
        document.getElementById('newStud').style.visibility = 'visible';
        document.getElementById('newStud').style.opacity = 1;
        break;
    }
  });
})

Answer 3

display none 的元素无法添加动画，因此您需要使用visibility & opacity 样式来获得流畅的动画，例如：

var radio_h = document.getElementById("customRadio1");
var radio = document.getElementById("customRadio2");

radio.onchange = function() {
  if (radio.checked === true) {
    document.getElementById("newStud").classList.add('show')
  }
}

radio_h.onchange = function() {
  if (radio_h.checked === true) {
    document.getElementById("newStud").classList.remove('show')
  }
}

#newStud {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.5s, opacity 0.5s linear;
}

#newStud.show {
  visibility: visible;
  opacity: 1;
  transition-delay: 0.4s;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div class="form-group">
  <div class="form-row">
    <div class="col-md-2"></div>
    <div class="col-md-4">
      <div class="custom-control custom-radio">
        <input type="radio" id="customRadio1" name="studOldNew" class="custom-control-input" checked="checked">
        <label class="custom-control-label" for="customRadio1" style="font-size: 18px!important;">Old Student</label>
      </div>
    </div>
    <div class="col-md-4">
      <div class="custom-control custom-radio">
        <input type="radio" id="customRadio2" name="studOldNew" class="custom-control-input">
        <label class="custom-control-label" for="customRadio2" style="font-size: 18px!important;">New Student/Transfer In</label>
      </div>
    </div>
    <div class="col-md-2"></div>
  </div>
</div>
<div class="form-group" id="newStud">
  <div class="form-row">
    <div class="col-md-6">
      <label for="inputTextBox" style="font-weight: 500; font-size: 18px!important;">Name of Previous School</label>
      <input type="text" class="form-control" id="inputTextBox" aria-describedby="nameHelp" placeholder="Enter firstname" name="pname" required maxlength="50">
    </div>
    <div class="col-md-6">
      <label for="inputTextBox2" style="font-weight: 500; font-size: 18px!important;">Address of Previous School</label>
      <input type="text" class="form-control" id="inputTextBox2" aria-describedby="nameHelp" placeholder="Enter lastname" name="padd" required maxlength="50">
    </div>
  </div>
</div>