单击提交后如何获取选定的单选按钮以显示特定的隐藏 div？

Posted 2023-05-09

【中文标题】单击提交后如何获取选定的单选按钮以显示特定的隐藏 div？

【英文标题】：How to get selected radio button to display specific hidden div after clicking submit?

【发布时间】：2015-08-09 22:14:41

【问题描述】：

我目前有三个单选按钮。单击提交按钮后，我希望选定的单选按钮触发弹出 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  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  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();
);

【参考方案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;
  
);

它根据选中的input 的id 显示适当的div。

片段

$(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;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

<div id="bank-act-popup">
    <h2>Please enter your bank account information:</h2>
    <hr  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>

<div id="credit-card-popup">
    <h2>Please enter your credit card information:</h2>
    <hr  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>

【参考方案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;



);