使用带有显示/隐藏单选按钮的jquery，一个表单而不是两个表单

我的问题很简单，我想显示一个表单，而不是当前的两个表单，我的意思是我想根据选择隐藏或显示一些字段 选择“个人”时，我想显示4个字段（姓名、姓氏、afm、电子邮件），选择“公司”时，我想隐藏（姓名、姓氏）并就地显示“公司名称”输入字段，并保留afm、电子邮件输入字段。所以使用一种形式！而不是两个。 目前我的代码有两种形式。。。他在工作。。但是我想使用一个表单，所以这里是我的jquery代码

   <script type="text/javascript">
    $(document).ready(function(){
    $("input[name$='forma']").click(function() {
    var formma = $(this).val();
    $("div.desc").hide();
    $("#Forma" + formma).show();
      });
    });
   </script> 

$（文档）.ready（函数（）{
$（“输入[name$='forma']）。单击（函数（）{
var formma=$（this.val（）；
$（“div.desc”）.hide（）；
$（“#Forma”+formma）.show（）；
});
});

还有html和2个表单，但正如我说的，我想要一个表单，因为在将来的使用中会添加更多的字段

    <div class="filtering">         
      <div id="myFormGroup">    
Individual<input type="radio" name="forma" checked="checked" value="2"  />    
Company<input type="radio" name="forma" value="3" />    
   <div id="Forma2" class="desc">
    <div class="idiotisReg">
     <form id="frmIdiotisCompany" name="frmIdiotisCompany" onSubmit="return checkForm()" method="post" target="_top">             
        <table width="85%" border="0">
           <tr>
             <th scope="col"></th>
             <th scope="col"><span id="idiotisNa">Individual Form</span></th>
            </tr>
            <tr>
             <th scope="col"><span id="idiotisNa">Name</span>:</th>
             <th scope="col"><input type="text" size="75" id="individualName" name="individualName"></th>
           </tr>
           <tr>
             <th scope="col"><span id="idiotisSu">Surname</span>:</th>
             <th scope="col"><input type="text" size="75" id="individualSurname" name="individualSurname"></th>
           </tr>
           <tr>
             <th scope="col"><span id="idiotisAf">AFM</span>:</th>
             <th scope="col"><input type="text" size="75" id="Afm" name="Afm"></th>
           </tr>
           <tr>
             <th scope="col"><span id="idiotisEm">Email</span>:</th>
             <th scope="col"><input type="text" size="75" id="Email" name="idiotisCompanyEmail"></th>
           </tr>
           <tr>
             <th height="54" scope="col"></br></th>
            <th scope="col"><button name="Submit" type="submit" id="Submit" style="text-align: right" >Submit</button></br></th>
           </tr>
         </table>
    </form>
   </div>
  </div>
     <div id="Forma3" class="desc" style="display: none;">
     <div class="idiotisReg">
     <form id="frmIdiotisCompany" name="frmIdiotisCompany" onSubmit="return checkForm()" method="post" target="_top">             
        <table width="85%" border="0">
           <tr>
             <th scope="col"></th>
             <th scope="col"><span id="idiotisNa">Company Form</span></th>
           </tr>
            <tr>
             <th scope="col"><span id="idiotisNa">Company Name</span>:</th>
             <th scope="col"><input type="text" size="75" id="CompanyName" name="CompanyName"></th>
           </tr>
           <tr>
             <th scope="col"><span id="idiotisAf">AFM</span>:</th>
             <th scope="col"><input type="text" size="75" id="Afm" name="Afm"></th>
           </tr>
           <tr>
             <th scope="col"><span id="idiotisEm">Email</span>:</th>
             <th scope="col"><input type="text" size="75" id="Email" name="Email"></th>
           </tr>
           <tr>
             <th height="54" scope="col"></br></th>
            <th scope="col"><button name="Submit" type="submit" id="Submit" style="text-align: right" >Submit</button></br></th>
           </tr>
         </table>
    </form>
</div>
</div>

个人
单位
个人形式
姓名：
姓：
原子力显微镜：
电邮：


提交

公司形式
公司名称：
原子力显微镜：
电邮：


提交

---

我相信我必须更改html中的jquery和div，但它们是什么？如果有任何帮助，我将不胜感激。

在查看您的代码后，我发现了几个语法错误。试试这个：

<script type="text/javascript">
    $(document).ready(function(){
       $("input[name='forma']").click(function(){
          var formma = $(this).val();
          $("div.desc").hide();
          $("#Forma" + formma).show();
       });
   });
</script>

$（文档）.ready（函数（）{
$（“输入[name='forma']”）。单击（函数（）{
var formma=$（this.val（）；
$（“div.desc”）.hide（）；
$（“#Forma”+formma）.show（）；
});
});

好的，我用一张表格就完成了！将jquery更改为（以防其他人需要它）

   //showhide function on the 1 forma with 2 divs
   $("input[name$='type']").click(function(){
   var value = $(this).val();
  if(value=='Individual') {
   // $("#Individual_box").show();
  $("#Individual_box").slideDown("fast"); //Slide Down Effect
 $("#Company_box").hide();
 }
 else if(value=='Company') {
// $("#Company_box").show();
 $("#Company_box").slideDown("fast"); //Slide Down Effect
  $("#Individual_box").hide();
 }
 });
$("#Individual_box").show();
$("#Company_box").hide();  
});

并将html更改为一个表单，如下所示

 <h1>Εγγραφή Ιδιώτη ή Επιχείρησης</h1>
  <form action="" method="post" name="form1">
  <p>
   <label>
  <input type="radio" name="type" value="Individual" id="type_0" checked="checked" />
  Ιδιώτης</label>
   <label>
  <input type="radio" name="type" value="Company" id="type_1" />
  Επιχείρηση</label>
  </p>
 <div id="Individual_box">
  <p>
  <label>Όνομα</label>
  <br />
  <input type="text" />
 </p>
  <p>
  <label>Επώνυμο</label>
  <br />
  <input type="text" />
 </p>
 <p>
  <label>Α.Φ.Μ. Ιδιώτη</label>
  <br />
  <input type="text" />
 </p>
 <p>
  <label>E-mail Ιδιώτη</label>
  <br />
  <input type="text" />
</p>
</div>
<div id="Company_box">
<p>
  <label>Επωνυμία Επιχείρησης</label>
  <br />
  <input type="text" />
</p>
<p>
  <label>Α.Φ.Μ. Επιχείρησης</label>
  <br />
  <input type="text" />
</p>
<p>
  <label>E-mail Επιχείρησης</label>
  <br />
  <input type="text" />
</p>
</div>
<p>
<input type="submit" value="Καταχώρηση" />
</p>

---

你可以在想要隐藏/显示的div中添加指令。谢谢denisazevedo真的很感激！！谢谢Viswanath D，但我相信你在上面发布了完全相同的jquery代码…谢谢你的帮助：）@dc03kks嘿，不是确切的代码，我做了一些语法更正。检查一下。。！！

   topic closed thank you once again all of you