<small id='U8uRa'></small><noframes id='U8uRa'>

    <bdo id='U8uRa'></bdo><ul id='U8uRa'></ul>
  • <i id='U8uRa'><tr id='U8uRa'><dt id='U8uRa'><q id='U8uRa'><span id='U8uRa'><b id='U8uRa'><form id='U8uRa'><ins id='U8uRa'></ins><ul id='U8uRa'></ul><sub id='U8uRa'></sub></form><legend id='U8uRa'></legend><bdo id='U8uRa'><pre id='U8uRa'><center id='U8uRa'></center></pre></bdo></b><th id='U8uRa'></th></span></q></dt></tr></i><div id='U8uRa'><tfoot id='U8uRa'></tfoot><dl id='U8uRa'><fieldset id='U8uRa'></fieldset></dl></div>
      <tfoot id='U8uRa'></tfoot>
      <legend id='U8uRa'><style id='U8uRa'><dir id='U8uRa'><q id='U8uRa'></q></dir></style></legend>

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

        时间:2023-10-21
      1. <legend id='FlEpO'><style id='FlEpO'><dir id='FlEpO'><q id='FlEpO'></q></dir></style></legend>

          <i id='FlEpO'><tr id='FlEpO'><dt id='FlEpO'><q id='FlEpO'><span id='FlEpO'><b id='FlEpO'><form id='FlEpO'><ins id='FlEpO'></ins><ul id='FlEpO'></ul><sub id='FlEpO'></sub></form><legend id='FlEpO'></legend><bdo id='FlEpO'><pre id='FlEpO'><center id='FlEpO'></center></pre></bdo></b><th id='FlEpO'></th></span></q></dt></tr></i><div id='FlEpO'><tfoot id='FlEpO'></tfoot><dl id='FlEpO'><fieldset id='FlEpO'></fieldset></dl></div>

          <small id='FlEpO'></small><noframes id='FlEpO'>

            <bdo id='FlEpO'></bdo><ul id='FlEpO'></ul>
              • <tfoot id='FlEpO'></tfoot>
                  <tbody id='FlEpO'></tbody>

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

                  问题描述

                  我有以下 html,它有两种形式,第一种形式为 id=cardpayment,第二种形式为 id="intenetpayment".

                  我还有 3 个单选按钮,名为借记卡"、信用卡"、网上银行".

                  我想要做的就是,当我选择单选按钮借记卡或信用卡时,应该显示带有 id="cardpayment" 的表单,并且应该隐藏另一个表单,当我点击时网上银行单选按钮,应隐藏带有 id="cardpayment" 的表单,并应显示带有 id="internetpayment" 的表单.我是 jquery 和 javascript 的新手.我在网上查了一下,这可以通过添加/删除 css 类来使用 css 完成

                  <代码>{显示:无;}

                  但我不知道如何使用 javascript 使其工作.

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

                  请原谅这个冗长的问题,我没有在此处包含 css,以免混淆问题.无论如何它都在小提琴中.在此先感谢您的帮助.我已将除法分为以下两种形式.

                   <body><div id="信用卡"><标题><span class="title" style="background-image: url('images/fethrpowered.png');"><strong>刷卡支付:</strong>输入付款详情</span><a href="#"><span class="close"><img src="images/close.png"/></span></a></标题><部分 id="内容"><div class="title"><strong>付款方式-选择您的付款方式</strong></div><input type="radio" id="radio1" name="radios" value="all" 勾选><label for="radio1">信用卡</label><input type="radio" id="radio2" name="radios"value="false"><label for="radio2">借记卡</label><input type="radio" id="radio3" name="radios"value="false"><label for="radio3">网上银行</label><form method="post" id="cardpayment"><div style="float:right;margin-top:50px;"><输入类型='hidden' id='ccType' name='ccType'/><ul class="卡片"><li class="visa">签证</li><li class="visa_electron">Visa Electron</li><li class="mastercard">万事达卡</li><li class="maestro">大师</li></ul></div><div class="table form-fields"><div 类="行"><div class="label">卡号:</div><div class="input full"><input type="text" name="ccnumber" id="ccnumber" placeholder="8763125487533457"/><br/></div></div><div 类="行"><div class="label">卡片类型:</div><div class="输入满"><选择类=样式"><选择选项>签证</选项><option>万事达卡</option><option>大师</option><option>SBI Maestro</option></选择></div><div class="有效"></div></div><div 类="行"><div class="label">你的名字:</div><div class="input full"><input type="text" name="name" id="name" placeholder="Mr. Personality of TV"/></div></div><div class="行名"><div class="label">过期时间:</div><div class="输入大小50"><选择类=样式"><option selected>选择月份</option><option value="01">一月</option><option value="02">二月</option><option value="03">三月</option><option value="04">四月</option><option value="05">五月</option><option value="06">六月</option><option value="07">七月</option><option value="08">八月</option><option value="09">九月</option><option value="10">十月</option><option value="11">十一月</option><option value="12">十二月</option></选择><选择类=样式"><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></选择></div><div class="有效"></div></div><div class="行名"><div class="label">CVV 编号:</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 method="post" id="internetpayment"><div class="table form-fields"><div class="行名"><div class="label">名称:</div><div class="input full"><input type="text" name="name" id="Name" placeholder="输入你的名字"/></div></div><div class="行名"><div class="label">邮箱:</div><div class="input full"><input type="text" name="email" id="email" placeholder="Enter Email address"/></div></div><div class="行名"><div class="label">手机号码:</div><div class="input size50"><input type="text" name="手机号码" id="mobileNo"/></div></div><div class="行名"><div class="label">银行:</div><div class="输入大小50"><select name="BankId" class="styled" data-required="true" data-trigger="change"><option value="CORP">公司</option><选项值="HDFC">HDFC </选项><选项值="ICICI">ICICI </选项><选项值="IDBI">IDBI </选项><选项值="SBI">印度国家银行</option><选项值="DB">德意志</选项></选择></div><div class="有效"></div></div><div class="行名"><div class="label">金额:</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"/></表格></部分></div></身体>

                  解决方案

                  使用纯 JavaScript:

                  把它写在你的脚本部分.

                  var radios = document.getElementsByName("radios");var cardpayment = document.getElementById("cardpayment");var internetpayment = document.getElementById("internetpayment");/* 如果默认选择信用卡,则添加这两行代码.cardpayment.style.display = '块';//展示internetpayment.style.display = 'none';//隐藏*/for(var i = 0; i < radios.length; i++) {收音机[i].onclick = function() {var val = this.value;if(val == 'radio1' || val == 'radio2'){//假设单选按钮的值为 radio1、radio2 和 radio3.cardpayment.style.display = '块';//展示internetpayment.style.display = 'none';//隐藏}否则 if(val == 'radio3'){cardpayment.style.display = '无';internetpayment.style.display = 'block';}}}

                  小提琴:http://jsfiddle.net/LbrCf/

                  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/

                  这篇关于根据单选按钮选择显示表单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

                  上一篇:使用 required 属性和动态生成单选按钮 下一篇:在 jquery 的数组中检查收音机

                  相关文章

                  <tfoot id='RvvWv'></tfoot>
                  <i id='RvvWv'><tr id='RvvWv'><dt id='RvvWv'><q id='RvvWv'><span id='RvvWv'><b id='RvvWv'><form id='RvvWv'><ins id='RvvWv'></ins><ul id='RvvWv'></ul><sub id='RvvWv'></sub></form><legend id='RvvWv'></legend><bdo id='RvvWv'><pre id='RvvWv'><center id='RvvWv'></center></pre></bdo></b><th id='RvvWv'></th></span></q></dt></tr></i><div id='RvvWv'><tfoot id='RvvWv'></tfoot><dl id='RvvWv'><fieldset id='RvvWv'></fieldset></dl></div>

                    <bdo id='RvvWv'></bdo><ul id='RvvWv'></ul>
                • <legend id='RvvWv'><style id='RvvWv'><dir id='RvvWv'><q id='RvvWv'></q></dir></style></legend>

                      <small id='RvvWv'></small><noframes id='RvvWv'>