Question

我正在上学的披萨网站。

这是我需要回答的问题。 *允许用户从三种类型的信用卡中进行选择：Visa，MasterCard和American Express。根据信用卡类型，限制信用卡号码的长度，Visa和MasterCard的16位数，美国运通的15位数。 *

目前，页面已设置好，以便用户在拿起比萨饼或使用信用卡在线支付时选择是否要付款。

当选中在线无线电放大器时，会出现更多带有信用卡名称的无线电放大器。

html代码

<p> Payment Method</p>
<input id="paypickup" type="radio" name="rbRating" 
value="Pick Up" checked />Pay on pickup 
<input id="online" type="radio" name="rbRating" 
value="online" />Online


<div id="hidden2" class="textinput">
<input id="visa" type="radio" name="cardtype" 
value="Visa" onclick="showMe('visanum')"/>Visa 
<input id="mastercard" type="radio" name="cardtype" 
value="MasterCard" onclick="showMe('masternum')"/>MasterCard
<input id="americanexpress" type="radio" name="cardtype" 
value="American Express" onclick="showMe('americaninfo')"/>American Express
</div>

<div id="visainfo">
<label for="visanum">Credit Card Number</label>
<input id="visanum" type="text" name="cardnum" maxlength="16" />
</div>
<div id="masterinfo">
<label for="masternum">Credit Card Number</label>
<input id="masternum" type="text" name="cardnum" maxlength="16" />
</div>
<div id="americaninfo">
<label for="americannum">Credit Card Number</label>
<input id="americannum" type="text" name="cardnum" maxlength="15" />
</div>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>

用于隐藏信用卡单选框的JS代码，直到检查交付

   $(document).ready(function() {

   $('input[type="radio"]').click(function() {
   if($(this).attr('id') == 'paypickup') {
        $('#hidden2').hide();           
   }

   if($(this).attr('id') == 'online') {
        $('#hidden2').show();
   }
   });
});

正如你在html代码中看到的那样，我尝试通过创建多个带有maxlength的文本框来尝试这一点。但我立即意识到这是低效和混乱的。

我对这些东西很新。

Answer 1

为信用卡号创建一个输入框，最初禁用输入框，并选择信用卡的单选按钮启用输入框。 HEre是HTML和JS的变化

<强> HTML

<div>
  Credit Card Number
  <input id="creditCardNumber" type="text" name="cardnum" disabled/>
</div>

<强> JS

   function showMe(type) {
    // clear previous value
     $("#creditCardNumber").val('');
     // enable the input and accept 16 digits for amex
     if (type == "americaninfo") {
       $("#creditCardNumber").attr({
         maxlength: 16, 
         disabled: false
       });
     } else {
       $("#creditCardNumber").attr({
         maxlength: 15,
         disabled: false
       })
     }
   }

DEMO

Answer 2

如果我是你，我就不会使用所有这些data。相反，我会使用<input type="radio" name="cardtype" value="visa" data-maxLength="16"/>Visa属性将所有必要的数据存储在其中。

例如：

maxlength

这样，你不必担心隐藏和显示几个不同的盒子。然后，当用户点击新的无线电广告时，您只需将cardnumber输入中的data-attr属性设置为// Hide input $(".cardInput").hide(); // User clicks on radio button so we need to show the input for card info $('input:radio[name=cardtype]').click(function() { // Show the input for card and delete old value $("input:text[name=cardnum]").val(""); $(".cardInput").show(); // Get the maxLength set in the selected radio button var ml = $(this).attr("data-maxLength"); $("input:text[name=cardnum]").attr("maxlength", ml); });

的值

DEMO： https://jsbin.com/nufamixisi/edit?html,js,output

struct Struct {
    A a;
    B b;
    C c;
    Struct(A a, B b, C c) : a(a) , b(b), c(c) {}
};

我没有在那里抛出逻辑来显示/隐藏基于cardpickup等卡片的东西。我想你可以得到那个;）

自定义信用卡号码长度

2 个答案: