单击一个单选按钮时更改布局形式答案

【问题标题】：change layout form when i click one radio button单击一个单选按钮时更改布局形式
【发布时间】：2021-04-02 21:23:00
【问题描述】：

您好，我是一名学生，最近我正在学习 JavaScript、CSS 和 HTML，在做练习时遇到了问题。
在练习中，我使用的是 Bootstrap。

function Form(stringa){
    document.getElementById("form1").style.display="none";
            document.getElementById("form2").style.display = "none"; 
    document.getElementById(stringa).style.display = "block"; 
}

<!doctype html>
<html lang="en">
  <head>
    <title>Form di registrazione</title>
  </head>
  <body>
   <div class="container">
     <h1>Form di Registrazione</h1>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" value=1 onclick="Form('form1');" >
        <label class="form-check-label" for="inlineRadio1">Privato</label>
      </div>
       <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" onclick="Form('form2'); " value=2>
        <label class="form-check-label" for="inlineRadio2">Azienda</label>
      </div>
      <form id="form1" class="row g-3" value=1>
        <div class="col-md-6">
          <label for="inputEmail4" class="form-label">Email</label>
          <input type="email" class="form-control" id="inputEmail4">
        </div>
        <div class="col-md-6">
          <label for="inputPassword4" class="form-label">Password</label>
          <input type="password" class="form-control" id="inputPassword4">
        </div>
    </form>

    <form id="form2" type="hidden"class="row g-3"style="display:none;" value=2>
      <div class="col-md-6">
        <label for="inputEmail4" class="form-label">Eeeeee</label>
        <input type="email" class="form-control" id="inputEmail4">
      </div>
    </form>
    </div>
  </body>
</html>

为什么当我单击单选按钮时，它会更改表单布局？
谢谢大家

【问题讨论】：

很可能是由于 JavaScript OnClick 事件onclick="Form('form1'); 导致布局发生变化 - 此事件隐藏了form2 并将css 显示块添加到form1（这可能是原因）。没有足够的代码来提供解决方案。您可以通过将 block 替换为空字符串来解决此问题。无论如何，这个函数的目的是什么？

标签： javascript html jquery css radio-button

【解决方案1】：

您已经拥有 2 种不同的表格。单击无线电输入（放置在表单之外？什么？）将运行带有切换表单显示的功能。

发生了什么：隐藏一种形式并显示具有不同输入数量的另一种形式。

【讨论】：