EternalHour的社区主页

从我现在有了HTML和一个例子开始,我的答案就完全重新开始了。仍然不确定您到底希望发生什么,但您要求的是在这个代码中工作。

JS公司

你的代码有一个问题,就是你试图附加收音机按钮而不是容器。我选择使用 after 相反。第二个问题是,您需要为创建时选中此复选框。事件侦听器也需要事件委托,因为它是动态创建的元素,不存在。当加载DOM时。

我想您还需要一个现金收银机事件,以便它可以删除信用卡的复选框。

CSS

我删除了你的内联样式并将它们移动到单独的CSS中,更好的是如果可以的话,离他们远点。

$('input[id=pmt-authorizenet_aim]').val('cod');

$('#pmt-authorizenet_aim').on('click', function() {
  if ($(this).is(':checked')) {
    $('textarea[name="comments"]').val($('textarea[name="comments"]').val() + ' Credit Card ');
    // only create checkbox if it does not already exist
    if (!$('#openCCField').length) {
    	$(this).after("<input type='checkbox' name='myCheckbox' id='openCCField' />");
    }
  }
});

$('#pmt-cod').on('click', function() {
  if ($(this).is(':checked')) {
    $('textarea[name="comments"]').val($('textarea[name="comments"]').val() + ' Cash ');
  }
});

$('#checkoutPaymentForm').on('click', '#openCCField', function() {
  // using toggle allows you to show/hide automatically
  $('.fec-credit-card-info').toggle();
  $('input[id=pmt-authorizenet_aim]').val('cc');
});

.fec-credit-card-info,
#checkoutBillTo,
#add_tipLabel,
#add_tip {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="checkoutPaymentForm" class="split">
  <!-- <h1 id="checkoutPaymentHeading">Step 2 - Payment Information</h1> -->

  <fieldset class="fec-billing-methods fec-block-checkout fec-fieldset" id="checkoutPayment">
    <legend>Billing Details</legend>

    <!--BILLING ADDRESS-->
    <fieldset id="checkoutBillTo" class="fec-shipping-address fec-shipping-to">
      <legend>Billing Address</legend>
      <span class="fec-fieldset-legend-two">Billing Address</span>

      <div class="fec-address-container">
        <div id="checkoutBillto">
          <address>Carry Out Customer<br> 3026 East College Avenue<br> Ruskin, FL    33570<br> United States</address>
        </div>
        <a id="linkCheckoutPaymentAddr" href="https://onlineorder.sshorepizza.com/index.php?main_page=checkout_payment_address"><img src="includes/templates/template_default/buttons/english/button_change_address.gif" alt="Change Address" title=" Change Address " width="60" height="24"></a>
      </div>
    </fieldset>

    <strong>We accept:</strong> <img src="includes/templates/template_default/images/icons/cc1.gif" alt="" width="41" height="25"> <img src="includes/templates/template_default/images/icons/cc2.gif" alt="" width="50" height="30"> <img src="includes/templates/template_default/images/icons/cc3.gif"
      alt="" width="50" height="30"> <img src="includes/templates/template_default/images/icons/cc5.gif" alt="" width="50" height="30">

    <div class="fec-fieldset-legend-two">Billing info</div>

    <label class="inputLabel" for="add_tip" id="add_tipLabel" style="display: none;">Would you like to add a tip for the driver?</label>
    <input type="text" name="add_tip" size="5" id="add_tip" style="display: none;"><br class="clearBoth" id="add_tipBreak">


    <!-- <span class="fec-information">Please select a payment method for this order.</span> -->

    <label for="pmt-authorizenet_aim" class="radioButtonLabel">Credit Card</label>
    <div class="fec-box-check-radio">
      <input type="radio" name="payment" value="cod" id="pmt-authorizenet_aim">
    </div>

    <div class="fec-credit-card-info">

      <div class="fec-field">
        <label for="authorizenet_aim-cc-owner" class="inputLabel">Cardholder Name:</label>
        <input type="text" name="authorizenet_aim_cc_owner" value="Carry Out Customer" id="authorizenet_aim-cc-owner" onfocus="methodSelect('pmt-authorizenet_aim')" autocomplete="off"> </div>

      <div class="fec-field">
        <label for="authorizenet_aim-cc-number" class="inputLabel">Credit Card Number:</label>
        <input type="text" name="authorizenet_aim_cc_number" id="authorizenet_aim-cc-number" onfocus="methodSelect('pmt-authorizenet_aim')" autocomplete="off"> </div>

      <div class="fec-field">
        <label for="authorizenet_aim-cc-expires-month" class="inputLabel">Expiry Date:</label>
        <select name="authorizenet_aim_cc_expires_month" id="authorizenet_aim-cc-expires-month" onfocus="methodSelect('pmt-authorizenet_aim')">
          <option value="01">January - (01)</option>
          <option value="02">February - (02)</option>
          <option value="03" selected="selected">March - (03)</option>
          <option value="04">April - (04)</option>
          <option value="05">May - (05)</option>
          <option value="06">June - (06)</option>
          <option value="07">July - (07)</option>
          <option value="08">August - (08)</option>
          <option value="09">September - (09)</option>
          <option value="10">October - (10)</option>
          <option value="11">November - (11)</option>
          <option value="12">December - (12)</option>
        </select> &nbsp;
        <select name="authorizenet_aim_cc_expires_year" id="authorizenet_aim-cc-expires-year" onfocus="methodSelect('pmt-authorizenet_aim')">
          <option value="19">2019</option>
          <option value="20">2020</option>
          <option value="21">2021</option>
          <option value="22">2022</option>
          <option value="23">2023</option>
          <option value="24">2024</option>
          <option value="25">2025</option>
          <option value="26">2026</option>
          <option value="27">2027</option>
          <option value="28">2028</option>
          <option value="29">2029</option>
          <option value="30">2030</option>
          <option value="31">2031</option>
          <option value="32">2032</option>
          <option value="33">2033</option>
        </select>
      </div>

      <div class="fec-field">
        <label for="authorizenet_aim-cc-cvv" class="inputLabel">CVV Number:</label>
        <input type="text" name="authorizenet_aim_cc_cvv" size="4" maxlength="4" id="authorizenet_aim-cc-cvv" onfocus="methodSelect('pmt-authorizenet_aim')" autocomplete="off"> <a href="javascript:popupWindow('http://onlineorder.sshorepizza.com/index.php?main_page=popup_cvv_help')">What's this?</a>        </div>


    </div>
    <label for="pmt-cod" class="radioButtonLabel">Cash</label>
    <div class="fec-box-check-radio">
      <input type="radio" name="payment" value="cod" id="pmt-cod">
    </div>

    <div class="alert"></div>


    <!-- bof doublebox -->
    <!-- eof doublebox -->

  </fieldset>

  <!-- bof Gift Wrap -->
  <!-- eof Gift Wrap -->
</div>
<!-- eof payment -->

<!-- EOF PAYMENT -->

<!-- bog FEC v1.27 CHECKBOX -->
<!-- eof FEC v1.27 CHECKBOX -->
<!-- bof FEC v1.24a DROP DOWN -->
<!-- begin/comments -->

<fieldset class="fec-fieldset fec-block-checkout split" id="checkoutComments">
<legend>Special Instructions / Order Comments</legend>

<textarea name="comments" cols="45" rows="3"></textarea> </fieldset>