Question

当我使用此代码验证点击单选按钮时，我的javascript代码似乎无法运行。它假设在单击卡片单选按钮时下拉输入，并且当点击paypal按钮时，假设向上滑动输入.1st code javascript。第二个代码html。

if (document.getElementById('paypal').checked) {
  //Paypal radio button is checked
  $(".input-fields").slideDown("slow");
} else if (document.getElementById('card').checked) {
  //Card radio button is checked
  $(".input-fields").slideUp("slow");
};

<div class="panel-body">
  <h2 class="title">Checkout</h2>

  <div class="bar">
    <div class="step active"></div>
    <div class="step active"></div>
    <div class="step"></div>
    <div class="step"></div>
  </div>

  <div class="payment-method">
    <label for="card" class="method card">
        <div class="card-logos">
            <img src="img/visa_logo.png" />
            <img src="img/mastercard_logo.png" />
        </div>

        <div class="radio-input">
            <input id="card" type="radio" name="payment"> Pay $<%= total %> with credit card
        </div>
    </label>

    <label for="paypal" class="method paypal">
        <img src="img/paypal_logo.png" />
        <div class="radio-input">
            <input id="paypal" type="radio" name="payment"> Pay $<%= total %> with PayPal
        </div>
    </label>
  </div>

  <div class="input-fields">
    <div class="column-1">
      <label for="cardholder">Cardholder's Name</label>
      <input type="text" id="cardholder" />

      <div class="small-inputs">
        <div>
          <label for="date">Valid thru</label>
          <input type="text" id="date" placeholder="MM / YY" />
        </div>

        <div>
          <label for="verification">CVV / CVC *</label>
          <input type="password" id="verification" />
        </div>
      </div>

    </div>
    <div class="column-2">
      <label for="cardnumber">Card Number</label>
      <input type="password" id="cardnumber" />

      <span class="info">* CVV or CVC is the card security code, unique three digits number on the back of your card separate from its number.</span>
    </div>
  </div>
</div>

Answer 1

您唯一想念的是在函数中添加逻辑并使用{{1}}将其添加到事件中以进行值更改。

我们使用addEventListener()通过document.getElementById()获取两个输入元素，然后在更改值时触发事件侦听器。

ID

document.getElementById("card").addEventListener("change", validate);
document.getElementById("paypal").addEventListener("change", validate);

function validate() {
  if (document.getElementById('paypal').checked) {
    //Paypal radio button is checked
    $(".input-fields").slideDown("slow");
  } else if (document.getElementById('card').checked) {
    //Card radio button is checked
    $(".input-fields").slideUp("slow");
  };
}

document.getElementById("card").addEventListener("change", validate);
document.getElementById("paypal").addEventListener("change", validate);

<强>参考文献：

Event Listeners

Answer 2

您需要在事件侦听器中添加javascript。例如

$("input[name='payment']").click(function ()
        {
            if (document.getElementById('paypal').checked)
            {
                //Paypal radio button is checked
                $(".input-fields").slideDown("slow");
            }
            else if (document.getElementById('card').checked)
            {
                //Card radio button is checked
                $(".input-fields").slideUp("slow");
            }
            ;
        });

Javascript无法按预期工作

2 个答案: