Question

我有以下html，其中有两个表单，表单id=cardpayment表示第一个表单，表单id="intenetpayment"表示第二个表单。

此外，我还有3个单选按钮，名为＆＃34;借记卡＆＃34;，＆＃34;信用卡＆＃34;，＆＃34;网上银行＆＃34;。

我想要做的就是，当我选择单选按钮Debitcard或信用卡时，应显示带id="cardpayment"的表格，另一个表格应隐藏，当我点击互联网银行单选按钮时，表格{应隐藏{1}}，并显示id="cardpayment"表单。我是jquery和javascript的新手。我在线检查过这可以通过添加/删除css类使用css来完成

id="internetpayment"

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

你可以在http://jsfiddle.net/d5qDb/1/

找到小提琴对于这个长期的问题，请原谅我，并且我在这里包含了css，因为它没有混淆这个问题。无论如何它都是小提琴。请提前获取任何帮助。我已将该部门分为以下两种形式。

{
display:none;
}

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

Answer 1

尝试使用jQuery Onchange

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

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

Answer 2

使用纯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';
     }    

  }
}

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

Answer 3

我将此JavaScript代码添加到您的JSFiddel中以创建该效果

$('#radio1').change(function() {
    if(this.checked) {
        $('#cardpayment').show();
        $('#internetpayment').hide();
    }
});
$('#radio2').change(function() {
    if(this.checked) {
        $('#internetpayment').show();
        $('#cardpayment').hide();
    }
});

Answer 4

您的jQuery代码应如下所示：

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

}）

不要忘记加载jQuery库以使其工作。此外，下次您需要此类功能时，可以使用this。你不必真正加载他们的css文件，只加载js库，你可以根据需要设置标签的样式。

Answer 5

非常简单。就这样做：

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

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

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

5 个答案: