时间戳

首页 > 解决方案 > JavaScript Radio Toggle 根据选中显示不同的表单字段

javascript - JavaScript Radio Toggle 根据选中显示不同的表单字段

问题描述

所以我试图根据所选的收音机显示某些字段，我觉得我很接近但它不起作用，我没有收到错误。

所以我定义了所有的 DOM 元素，设置了更改事件侦听器，并且我正在调用它们。我还在一个有效的类上设置了默认的 display: none 。

const intSelect = document.querySelector('#internal_form');
const extSelect = document.querySelector('#external_url');
const intForm = document.querySelector('.internal_form');
const extForm = document.querySelector('.external_form');

function show() {
  intSelect.addEventListener('change', showOne);
  extSelect.addEventListener('change', showOne);
}

let showOne = event => {
  event.preventDefault();
  showTheThings(event.currentTarget, intForm, extForm);
}

let showTheThings = (target, div) => {
  if (target.checked = true) {
    div.classList.remove('hide');
  } else {
    div.classList.add('hide');
    div.querySelectorAll('input[type="radio"]').forEach(function(el) {
      el.checked = false;
    });
  }
};
.external_form.hide,
.internal_form.hide{
display: none;
}
<form>
  <div class="form-group radio-format">
    <label>Method</label>
    <div class="col-sm-10">
      <input class="trigger form-check-input" type="radio" value="Internal Form" name="event[registration]" id="internal_form">
      <label class="form-check-label" for="internal_form">Internal Form</label>
      <input class="trigger form-check-input" type="radio" value="External URL" name="event[registration]" id="external_url">
      <label class="form-check-label" for="external_url">Internal Form</label>
    </div>
  </div>
  <div class="internal_form hide">
    <h2>Internal</h2>
  </div>
  <div class="external_form hide">
   <h2>External</h2>
  </div>
</form>

然而什么都没有发生。虽然当我在浏览器中进行测试时，它会在 intSelect 上应用更改，但在单击 extSelect 时不会删除（奇怪的是它在这里不起作用）。

我还尝试了非常通用的 JS，例如：

function show(){
 if (intSelect.checked =true) {
  intForm.classList.remove('hide');
 } else {
  intForm.classList.add('hide');
 };
}

这再次仅适用于删除类但不触发添加。

我在这里想念什么？

标签： javascript

解决方案

这是使用 ID 的简单代码，并且通过add and removing class

<!DOCTYPE html>
<head>
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
    <style type="text/css">
        .external_form.hide,
.internal_form.hide{
display: none;
}
    </style>
</head>
<body >
<form>
  <div class="form-group radio-format">
    <label>Method</label>
    <div class="col-sm-10">
      <input class="trigger form-check-input" type="radio" value="Internal Form" name="event[registration]" id="internal_url">
      <label class="form-check-label" for="internal_url">Internal Form</label>
      <input class="trigger form-check-input" type="radio" value="External URL" name="event[registration]" id="external_url">
      <label class="form-check-label" for="external_url">external Form</label>
    </div>
  </div>
  <div id="internal" class="internal_form hide">
    <h2>Internal</h2>
  </div>
  <div id="external" class="external_form hide">
   <h2>External</h2>
  </div>
</form>
</body>
</html>
<script>
    var internal = document.getElementById("internal");
    var external = document.getElementById("external");

document.getElementById("internal_url").addEventListener("click", function(){
    internal.classList.remove("hide");
    external.classList.add("hide");
    console.log("internal" , internal);
});

document.getElementById("external_url").addEventListener("click", function(){
    internal.classList.add("hide");
    external.classList.remove("hide");
});


</script>

代码很简单，看了就明白了。如果您有任何疑问，请随时询问。

推荐阅读