javascript - 在业务催化剂结帐中选择PayPal时如何隐藏信用卡字段

如何使用简单的CSS和/或JavaScript更改结帐页面，以便在选择“贝宝”付款选项时，信用卡字段会隐藏，并可能在“贝宝”按钮下拉出“提交”按钮。这是表代码的一部分：

 <tr>
            <td>
            <input checked="checked" type="radio" name="PaymentMethodType" id="PaymentMethodType_1" value="1" /> Credit Card<br />
            <input type="radio" name="PaymentMethodType" id="PaymentMethodType_5" value="5" /> PayPal<br />
            </td>
        </tr>
        <tr>
            <td><label for="CardName">Name on Card <span class="req">*</span></label><br />
            <input type="text" name="CardName" id="CardName" class="cat_textbox" autocomplete="off" /></td>
        </tr>
         <tr>
            <td><label for="CardType">Card Type <span class="req">*</span></label><br />
            <select name="CardType" id="CardType" class="cat_dropdown">
            <option value="1">Visa</option>
            <option value="2">Mastercard</option>
            <option value="3">Discover</option>
            <option value="4">American Express</option>

            </select></td>
        </tr>
        <tr>
            <td><label for="CardNumber">Card Number <span class="req">*</span></label><br />
            <input type="text" name="CardNumber" id="CardNumber" class="cat_textbox" autocomplete="off" /></td>
        </tr>
        <tr>
            <td><label>Card Expiry <span class="req">*</span></label><br />
            <select name="CardExpiryMonth" id="CardExpiryMonth" class="cat_dropdown_smaller">
            <option value="01">01</option>
            <option value="02">02</option>
            <option value="03">03</option>
            <option value="04">04</option>
            <option value="05">05</option>
            <option value="06">06</option>
            <option value="07">07</option>
            <option value="08">08</option>
            <option value="09">09</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            </select><select name="CardExpiryYear" id="CardExpiryYear" class="cat_dropdown_smaller">
            <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>
            </select></td>
        </tr>

        <tr>
            <td><label for="CardCCV">CCV Number <span class="req">*</span></label><br />
            <input type="text" name="CardCCV" id="CardCCV" class="cat_textbox" autocomplete="off" /></td>
        </tr>
        <tr>
            <td><label for="Amount">Amount <span class="req">*</span> <span id="constraint-300-label"></span></label><br />
            <input type="text" name="Amount" id="Amount" class="cat_textbox" /></td>
        </tr>
        <tr>
            <td><input class="cat_button" type="submit" value="Submit" id="catwebformbutton" /></td>
        </tr>

最佳答案

因此，对于基本解决方案，您可以使用jQuery找出选择了哪个输入，检测它是否为PayPal无线电，并隐藏信用卡字段。

看一下fiddle。

如果用户决定输入信用卡，还将显示这些字段。

我将信用卡tr包裹在名为.credit-cards的类中，jQuery只是隐藏并显示了该类。

确保也复制html，并在文件中包含jQuery。

PS：这可能是重复的问题/答案。

关于javascript - 在业务催化剂结帐中选择PayPal时如何隐藏信用卡字段，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31016243/