Javascript 基于单选按钮选择显示表单_Javascript_Jquery_Html_Forms_Radio Button

Javascript 基于单选按钮选择显示表单

javascript jquery html forms

Javascript 基于单选按钮选择显示表单,javascript,jquery,html,forms,radio-button,Javascript,Jquery,Html,Forms,Radio Button,我有下面的html，它有两个表单，第一个表单是id=cardpayment，第二个表单是id=“intenetpayment” 我还有三个单选按钮，分别是“借记卡”、“信用卡”、“网上银行” 我只想做的是，当我选择Debitcard或信用卡单选按钮时，应该显示带有id=“cardpayment”的表单，另一个表单应该隐藏，当我点击Internetbanking单选按钮时，带有id=“cardpayment”的表单应该隐藏，带有id=“internetpayment”的表单应该显示。我是jquer

我有下面的html，它有两个表单，第一个表单是

id=cardpayment

，第二个表单是

id=“intenetpayment”

我还有三个单选按钮，分别是“借记卡”、“信用卡”、“网上银行”

我只想做的是，当我选择Debitcard或信用卡单选按钮时，应该显示带有

id=“cardpayment”

的表单，另一个表单应该隐藏，当我点击Internetbanking单选按钮时，带有

id=“cardpayment”

的表单应该隐藏，带有

id=“internetpayment”

的表单应该显示。我是jquery和javascript的新手。我在网上查过，这可以通过添加/删除css类使用css来实现

{
display:none;
}

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

你可以在家里找到小提琴

请原谅我提了这么长的问题，我没有把css放在这里，因为我没有混淆这个问题。不管怎样，它都在小提琴上。提前谢谢你的帮助。我已经把下面两个表格分开了

 <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>


卡付款：输入付款详细信息
支付模式-选择您的支付模式
信用卡
借记卡
网上银行

visa
visa electron
万事达卡
大师

卡号：


卡类型：
签证
万事达卡
大师
SBI大师
你的名字：
有效期至：
选择月份
一月
二月
前进
四月
也许
六月
七月
八月
九月
十月
十一月
十二月
选择年份
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026                          2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
CVV编号：


姓名：
电邮：
手机号码：
银行：
公司
HDFC
ICICI
IDBI
印度国家银行
德意志银行
数量：

我将此JavaScript代码添加到您的JSFIDEL中以创建这种效果

$（'#radio1'）。更改（函数（）{
如果（选中此项）{
$（#cardpayment'）.show（）；
$（#internetpayment'）.hide（）；
}
});
$（'#radio2'）。更改（函数（）{
如果（选中此项）{
$（#internetpayment'）.show（）；
$（“#cardpayment”）.hide（）；
}
});

您的jQuery代码应该如下所示：

$(document).ready(function(){
$('#internet_radio').on('click', function(){
    $('#cardpayment').hide();
    $('#internetpayment').show();
})
$('#debit_radio').on('click', function(){
    $('#cardpayment').show();
    $('#internetpayment').hide();
})

})

不要忘了加载jQuery库来实现这一点。

另外，下次您需要此类功能时，也可以使用。您实际上不必加载他们的css文件，只需加载js库，而且您可以根据需要设置选项卡的样式。

非常简单。只要这样做：

$("#radio1, #radio2").on("click", function(){
   $("#cardpayment").show();
   $("#internetpayment").hide();
});

$("#radio3").on("click", function(){
   $("#cardpayment").hide();
   $("#internetpayment").show(); 
});

试试这个，使用jqueryonchange

$("#radio1, #radio2").on("change", function(){
   $("#cardpayment").show();
   $("#internetpayment").hide();
});

$("#radio3").on("change", function(){
   $("#cardpayment").hide();
   $("#internetpayment").show(); 
});

使用纯JavaScript:

在脚本部分写下这个

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';
     }    

  }
}

var radios=document.getElementsByName（“radios”）；
var cardpayment=document.getElementById（“cardpayment”）；
var internetpayment=document.getElementById（“internetpayment”）；
/*如果默认选择信用卡，则添加这两行代码。
cardpayment.style.display='block'；//显示
internetpayment.style.display='none'；//隐藏
*/
对于（变量i=0；i


小提琴：非常感谢Sandeep。这就像魅力：）@user3079558:欢迎：）
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';
     }    

  }
}