Question

我目前有三个单选按钮。单击提交按钮后，我希望选中的单选按钮触发弹出div。

我最初有一个“onclick”jQuery函数在选中单选按钮时弹出相应的div，但我不知道如何使用提交按钮将其构建到表单中......

我的HTML：

// Radio button html code
<label>
    <input type="radio" name="pmt-type" id="bank">Bank Account Information (ACH)
</label>
<label>
    <input type="radio" name="pmt-type" id="cc"> Credit Card, Debit Card, Health Savings Account (HSA) or Financial Savings Account (FSA)
</label>
<label>
    <input type="radio" name="pmt-type" id="later"> I'll just deal with it later
</label>
<input type="submit">  

// Hidden bank account div that should appear on submit if corresponding radio button is selected
<div id="bank-act-popup">
    <h2>Please enter your bank account information:</h2>
    <hr width="430px" class="center-hr"></hr>
    <br>
            <input type="text" name="routing" placeholder="Routing Number"><br>
            <input type="text" name="act-num" placeholder="Account Number"/><br>
            <input type="text" name="bank-name" placeholder="Bank Name"/><br>
        <br><br>
            <a class="btn" href="/payment/step9">Submit</a>
</div>

// Hidden credit card div that should appear on submit if corresponding radio button is selected
<div id="credit-card-popup">
    <h2>Please enter your credit card information:</h2>
    <hr width="430px" class="center-hr"></hr>
    <div class='card-wrapper'></div>
    <br>
        <form>
            <input type="text" name="number" placeholder="Card Number"><br>
            <input type="text" name="name" placeholder="Full Name"/><br>
            <input type="text" name="expiry" placeholder="Expiration Date"/><br>
            <input type="text" name="cvc" placeholder="CVC"/>
        </form>
</div>

我的jQuery代码

// Credit Card Div Popup

$(document).ready(function(){
    $("#credit-card-popup").hide();
});

// Bank Account Div Popup

$(document).ready(function(){
    $("#bank-act-popup").hide();
});

Answer 1

我认为这可以满足您的需求：

$('input[type="submit"]').click(function() {
  $("#credit-card-popup, #bank-act-popup").hide();

  switch($('input[name="pmt-type"]:checked').attr('id')) {
    case 'bank': $('#bank-act-popup').show();
                 break;
    case 'cc'  : $('#credit-card-popup').show();
                 break;
  }
});

根据已检查div的{{1}}显示相应的id。

<强>段

input

$(function() {
  $('input[type="submit"]').click(function() {
    $("#credit-card-popup, #bank-act-popup").hide();
    switch($('input[name="pmt-type"]:checked').attr('id')) {
      case 'bank': $('#bank-act-popup').show();
                   break;
      case 'cc'  : $('#credit-card-popup').show();
                   break;
    }
  });
});

label {
  display: block;
}

#credit-card-popup, #bank-act-popup {
  display: none;
}

Answer 2

尝试：

$("#bank-act-popup").hide();

$("#credit-card-popup").hide();

$(document).on('click', 'input[name=pmt-type]', function(event) {

var v = event.currentTarget.attributes.id.value;
   switch (v) {
   case 'bank':
     $("#bank-act-popup").toggle("slow");
     $("#credit-card-popup").hide('slow');
     break;
     case 'cc':
      $("#credit-card-popup").toggle("slow");
      $("#bank-act-popup").hide('slow');
     break;
     default:
      $("#bank-act-popup").hide('slow');
      $("#credit-card-popup").hide('slow');
     break;

}

});

单击提交后，如何选择单选按钮显示特定的隐藏div？

2 个答案: