根据单选按钮选择显示表格 | 根据单选按钮选择显示表格

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

我有下面的html，它有两种形式，形式为 id = cardpayment ，用于第一种形式和形式id =intenetpayment
此外，我还有3个单选按钮，名叫借记卡，信用卡，网上银行。
 
 
 我想要做的是，当我选择单选按钮Debitcard或信用卡时，应显示 id =cardpayment的表单并且其他表单应该被隐藏，当我点击Internetbanking单选按钮时， id =cardpayment的表单应该被隐藏并且使用 id =应显示internetpayment。我新来jquery和javascript.I在网上检查，这可以通过添加/删除css类使用css来完成
  { 
 display：none; 
} 
  
但是我不知道如何使用javascript工作。
 
 
 您可以在  
 
 
对于这个长期问题，请原谅我，并且我已经在这里包含了这个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> 
 
 < option value =CORP>公司< / option> 
< option value =HDFC> HDFC< / option> 
< option value =ICICI> ICICI< / option> 
< option value =IDBI> IDBI< / option> 
< option value =SBI> STATE BANK OF INDIA< / option> 
< option value =DB> DEUTSCHE< / option> 
< / select> 
 
 
< / div> 
< div class =valid>< / div> 
< / div> 
< div class =row name> 
< div class =label>金额：< / div> 
< div class =input size50>< input type =textname =amountid =amountplaceholder =10.00/>< / div> 
< / div> 
< / div> 
< input type =submitstyle =float：rightvalue =Pay Now/> 
< / form> 
 
 
 
 
< / section> 
 
< / div> 
 
 
< / body> 
  
 
 
解决方案
 使用纯JavaScript： 
 
 
 在脚本部分写下。
  var radios = document .getElementsByName（ 无线电）; 
 var cardpayment = document.getElementById（cardpayment）; 
 var internetpayment = document.getElementById（internetpayment）; 
 
 / *如果默认选择信用卡，请添加以下两行代码。 
 cardpayment.style.display ='block'; // show 
 internetpayment.style.display ='none'; //隐藏
 * / 
 
（var i = 0; i< radios.length; i ++） {
 radios [i] .onclick = function（）{
 var val = this.value; 
 if（val =='radio1'|| val =='radio2'）{//假设您的单选按钮的值是radio1，radio2和radio3。 
 cardpayment.style.display ='block'; //显示
 internetpayment.style.display ='none'; //隐藏
} 
 else if（val =='radio3'）{
 cardpayment.style.display = '没有'; 
 internetpayment.style.display ='block'; 
} 
 
} 
} 
  
小提琴：  
 
I have the following html which has two forms with form id=cardpayment for first form and form id="intenetpayment" for the second.
Also I have 3 radio buttons named "Debit card","Credit Card","Internet Banking".
All I want to do is,when I select the radio button Debitcard or Credit card,form with id="cardpayment" should be shown and the other form should be hidden and when i click on Internetbanking radio button , form with id="cardpayment" should be hidden and form with id="internetpayment" should be shown. Im new to jquery and javascript.I checked online that this can be done using a css by adding/removing a css class 
{
display:none;
}
But i dont know how to make it work using javascript.
You can find the fiddle at  http://jsfiddle.net/d5qDb/1/
Pardon for the long question,and I havnt included the css here for not confusing the question.It is in the fiddle anyway.thanks in advance for any help.I have given the division to two forms below.
 <body>
        <div id="credit-card">
            <header>
                           <span class="title" style="background-image: url('images/fethrpowered.png');"><strong>Card Payment:</strong> Enter payment details</span>
                <a href="#"><span class="close"><img src="images/close.png"/></span></a>



            </header>
            <section id="content">
                                <div class="title"><strong>Payment Mode- Select your payment mode</strong></div>

         <input type="radio" id="radio1" name="radios" value="all" checked>
       <label for="radio1">Credit Card</label>

    <input type="radio" id="radio2" name="radios"value="false">
       <label for="radio2">Debit Card</label>

        <input type="radio" id="radio3" name="radios"value="false">
       <label for="radio3">Internet Banking</label>

                <form method="post" id="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">Card Number:</div>
                            <div class="input full"><input type="text" name="ccnumber" id="ccnumber" placeholder="8763125487533457"/><br/></div>


    </div>


                        <div class="row">
                            <div class="label">Card Type:</div>
                            <div class="input full">
                                <select class="styled">
                                    <option selected>Visa</option>
                                    <option>Mastercard</option>
                                    <option>Maestro</option>
                                    <option>SBI Maestro</option>
                                </select>
                            </div>
                            <div class="valid"></div>
                        </div>
                        <div class="row">
                                                    <div class="label">Your name:</div>
                            <div class="input full"><input type="text" name="name" id="name" placeholder="Mr. Personality of TV"/></div>


                        </div>
                        <div class="row name">
                            <div class="label">Expires On:</div>
                            <div class="input size50">
                                <select class="styled">
    <option selected>Select Month</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="styled">
    <option selected>Select Year</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="text" name="cvv" id="cvv" placeholder="490" maxlength="3"/></div>
                        </div>
                    </div>
                    <input type="submit" style="float:right" value="Pay Now"/>
                </form>
        <form method="post" id="internetpayment">


        <div class="table form-fields">

            <div class="row name">
                            <div class="label">Name:</div>
                            <div class="input full"><input type="text" name="name" id="Name" placeholder="Enter your name"/></div>
                        </div>

            <div class="row name">
                            <div class="label">Email:</div>
                            <div class="input full"><input type="text" name="email" id="email" placeholder="Enter Email address"/></div>
                        </div>

                        <div class="row name">
                    <div class="label">Mobile Number:</div>
                            <div class="input size50"><input type="text" name="Mobile Number" id="mobileNo"/></div>


                        </div>
                        <div class="row name">
                            <div class="label">Bank:</div>
                            <div class="input size50">

     <select name="BankId" class="styled" data-required="true" data-trigger="change">
                        <option value="CORP">Corporation </option>
                        <option value="HDFC"> HDFC </option>
                        <option value="ICICI"> ICICI </option>
                        <option value="IDBI"> IDBI </option>
                        <option value="SBI"> STATE BANK OF INDIA </option>
                        <option value="DB"> DEUTSCHE </option>
                </select>


                            </div>
                            <div class="valid"></div>
                        </div>
                        <div class="row name">
                            <div class="label">Amount:</div>
                            <div class="input size50"><input type="text" name="amount" id="amount" placeholder="10.00"/></div>
                        </div>
                    </div>
                    <input type="submit" style="float:right" value="Pay Now"/>
                </form>




            </section>

        </div>


    </body>
 解决方案 
Using pure JavaScript:
Write this in your Script section.
var radios = document.getElementsByName("radios");
var cardpayment =  document.getElementById("cardpayment");
var internetpayment =  document.getElementById("internetpayment");

/* If Credit Card is selected by default, add these two lines of code.
cardpayment.style.display = 'block';   // show
internetpayment.style.display = 'none';// hide
*/

for(var i = 0; i < radios.length; i++) {
   radios[i].onclick = function() {
     var val = this.value;
     if(val == 'radio1' || val == 'radio2'){  // Assuming your value for radio buttons is radio1, radio2 and radio3.
        cardpayment.style.display = 'block';   // show
        internetpayment.style.display = 'none';// hide
     }
     else if(val == 'radio3'){
         cardpayment.style.display = 'none';
         internetpayment.style.display = 'block';
     }

  }
}
fiddle: http://jsfiddle.net/LbrCf/
                        这篇关于根据单选按钮选择显示表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！