根据单选按钮选择显示表格 [英] Show form based on radio button select

查看：175
本文介绍了根据单选按钮选择显示表格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有下面的html，它有两种形式，形式为 id = cardpayment ，用于第一种形式和形式 id =intenetpayment

此外，我还有3个单选按钮，名叫借记卡，信用卡，网上银行。



我想要做的是，当我选择单选按钮Debitcard或信用卡时，应显示 id =cardpayment的表单并且其他表单应该被隐藏，当我点击Internetbanking单选按钮时， id =cardpayment的表单应该被隐藏并且使用 id =应显示internetpayment。我新来jquery和javascript.I在网上检查，这可以通过添加/删除css类使用css来完成

  { 
 display：none; 
}

但是我不知道如何使用javascript工作。



您可以在 http://jsfiddle.net/d5qDb找到小提琴/ 1 /

对于这个长期问题，请原谅我，并且我已经在这里包含了这个CSS，不会混淆这个问题。无论如何，提前给予任何帮助。我已给出了以下两种形式的分工。

 < body> 
< div id =credit-card> 
< header> 
< span class =titlestyle =background-image：url（'images / fethrpowered.png'）;>< strong>卡付款：< / strong>输入付款详情< / span> 
< a href =＃>< span class =close>< img src =images / close.png/>< / span>< / a> 
 
 
 
< / header> 
< section id =content> 
< div class =title>< strong>付款方式 - 选择您的付款方式< / strong>< / div> 
 
< input type =radioid =radio1name =radiosvalue =allchecked> 
< label for =radio1>信用卡< / label> 
 
< input type =radioid =radio2name =radiosvalue =false> 
< label for =radio2>借记卡< / label> 
 
< input type =radioid =radio3name =radiosvalue =false> 
< label for =radio3>网上银行< / label> 
 
< form method =postid =cardpayment> 
 
 
 
< div style =float：right; margin-top：50px;> 
< input type ='hidden'id ='ccType'name ='ccType'/> 
< ul class =cards> 
< li class =visa> Visa< / li> 
< li class =visa_electron> Visa Electron< / li> 
< li class =mastercard> MasterCard< / li> 
< li class =maestro> Maestro< / li> 
< / ul> 
< / div> 
 
< div class =table form-fields> 
< div class =row> 
< div class =label>卡号：< / div> 
< div class =input full>< input type =textname =ccnumberid =ccnumberplaceholder =8763125487533457/>< br />< DIV> 
 
 
< / div> 
 
 
< div class =row> 
< div class =label>卡片类型：< / div> 
< div class =input full> 
< select class =style> 
< option selected> Visa< / option> 
< option>万事达卡< / option> 
< option> Maestro< / option> 
< option> SBI Maestro< / option> 
< / select> 
< / div> 
< div class =valid>< / div> 
< / div> 
< div class =row> 
< div class =label>您的名字：< / div> 
< div class =input full>< input type =textname =nameid =nameplaceholder =Mr。Personality of TV/>< / div> 
 
 
< / div> 
< div class =row name> 
< div class =label>过期日期：< / div> 
< div class =input size50> 
< select class =style> 
< option selected>选择月份< / option> 
< option value =01> January< / option> 
< option value =02> February< / option> 
< option value =03> March< / option> 
< option value =04> April< / option> 
< option value =05> May< / option> 
< option value =06> June< / option> 
< option value =07> July< / option> 
< option value =08> August< / option> 
< option value =09> September< / option> 
< option value =10> October< / option> 
< option value =11> November< / option> 
< option value =12> December< / option> 
< / select> 
< select class =style> 
< option selected>选择年份< / option> 
< option value =2012> 2012< / option> 
< option value =2013​​> 2013< / option> 
< option value =2014> 2014< / option> 
< option value =2015> 2015< / option> 
< option value =2016> 2016< / option> 
< option value =2017> 2017< / option> 
< option value =2018> 2018< / option> 
< option value =2019> 2019< / option> 
< option value =2020> 2020< / option> 
< option value =2021> 2021< / option> 
< option value =2022> 2022< / option> 
< option value =2023> 2023< / option> 
< option value =2024> 2024< / option> 
< option value =2025> 2025< / option> 
< option value =2026> 2026< / option> < option value =2027> 2027< / option> 
< option value =2028> 2028< / option> 
< option value =2029> 2029< / option> 
< option value =2030> 2030< / option> 
< option value =2031> 2031< / option> 
< option value =2032> 2032< / option> 
< option value =2033> 2033< / option> 
< option value =2034> 2034< / option> 
< option value =2035> 2035< / option> 
< option value =2036> 2036< / option> 
< / select> 
 
< / div> 
< div class =valid>< / div> 
< / div> 
< div class =row name> 
< div class =label> CVV Number：< / div> 
< div class =input size50>< input type =textname =cvvid =cvvplaceholder =490maxlength =3/>< / div> ; 
< / div> 
< / div> 
< input type =submitstyle =float：rightvalue =Pay Now/> 
< / form> 
  





 < ; form method =postid =internetpayment> 
 
 
< div class =table form-fields> 
 
< div class =row name> 
< div class =label>名称：< / div> 
< div class =input full>< input type =textname =nameid =Nameplaceholder =Enter your name/>< / div> 
< / div> 
 
< div class =row name> 
< div class =label>电子邮件地址：< / div> 
< div class =input full>< input type =textname =emailid =emailplaceholder =Enter Email address/>< / div> 
< / div> 
 
< div class =row name> 
< div class =label>手机号码：< / div> 
< div class =input size50>< input type =textname =Mobile Numberid =mobileNo/>< / div> 
 
 
< / div> 
< div class =row name> 
< div class =label> Bank：< / div> 
< div class =input size50>
发送“验证码”获取 | 15天全站免登陆