javascript - Jquery 如果选中其他框并取消隐藏 id，则向元素添加一个复选框

Question

我有一个结帐页面。我使用 Jquery 隐藏信用卡信息框，因为 99% 的情况下它不会用于运行信用卡。但是，如果选中信用卡框(#pmt-authorizenet_aim)，我想插入另一个复选框并允许用户选中它。如果选中它，我希望显示信用卡信息框(.fec-credit-card-info)。但是，当我使用下面的代码输入 id #openCCField 的复选框时，它始终显示信用卡信息框，并且默认情况下不再隐藏它。我哪里错了？这就是我到目前为止所拥有的。

现在可以在 http://www.sshorepizza.com/stackoverflow.html 处看到它

$(function() {
  $('#checkoutBillTo').hide();
  $('#add_tipLabel').hide();
  $('#add_tip').hide();
  $('.fec-credit-card-info').hide();
  $('input[id=pmt-authorizenet_aim]').val('cod');

});

$(function() {
  $('#pmt-authorizenet_aim').click(function() {
    if ($(this).is(':checked')) {
      $('textarea[name="comments"]').val($('textarea[name="comments"]').val() + ' Credit Card ');
      $(this).append("<input type='checkbox' name='myCheckbox' id='openCCField' />");
    }
    if (('#openCCField').is(':checked')) {
      $('.fec-credit-card-info').show();
      $('input[id=pmt-authorizenet_aim]').val('cc');
    }
  });
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- bof payment -->
<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>
    <span class="fec-fieldset-legend">Billing Details</span>

    <!--BILLING ADDRESS-->
    <fieldset id="checkoutBillTo" class="fec-shipping-address fec-shipping-to" style="display: none;">
      <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">

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

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

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

    <label for="pmt-authorizenet_aim" class="radioButtonLabel">Credit Card</label>



    <div class="fec-credit-card-info" style="display: none;">

      <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>
    <div class="fec-box-check-radio">
      <input type="radio" name="payment" value="cod" id="pmt-cod">
    </div>

    <label for="pmt-cod" class="radioButtonLabel">Cash</label>

    <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>
  <span class="fec-fieldset-legend">Special Instructions / Order Comments</span>

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

Answer 1

几个问题

在附加 openCCField 之前，您无法检查它是否已选中，因此您需要委托(delegate)或像我一样执行操作:将其插入 HTML 并隐藏它

并且您将其附加到 radio ，而不是 radio 的父 radio

信用卡/现金文本也会被一遍又一遍地添加

你真的应该更新你的 jQuery

$(function() {
  $('#checkoutBillTo').hide();
  $('#add_tipLabel').hide();
  $('#add_tip').hide();
  $('.fec-credit-card-info').hide();
  $('input[id=pmt-authorizenet_aim]').val('cod');

});

$(function() {

  $('#pmt-authorizenet_aim').on("click",function() {
    var text = $('textarea[name="comments"]').val(),
       check = $(this).is(':checked');
    $('#openCCField').toggle(check);
    $('textarea[name="comments"]').val(text.replace(" Cash ","")+ " Credit card ")
  })
  $('#openCCField').on("click",function() {
    var check = $(this).is(':checked');
    $('.fec-credit-card-info').toggle(check);
    $('input[id=pmt-authorizenet_aim]').val(check?'cc':"");
  });
  $('#pmt-cod').click(function() {
    if ($(this).is(':checked')) {
      var text = $('textarea[name="comments"]').val()
      $('textarea[name="comments"]').val(text.replace(" Credit card ","")+ " Cash ")
    }
  });
});

#openCCField { display: none }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- bof payment -->
<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>
    <span class="fec-fieldset-legend">Billing Details</span>

    <!--BILLING ADDRESS-->
    <fieldset id="checkoutBillTo" class="fec-shipping-address fec-shipping-to" style="display: none;">
      <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">

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

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

    <div class="fec-box-check-radio">
      <input type="radio" name="payment" value="cod" id="pmt-authorizenet_aim">
      <input type='checkbox' name='myCheckbox' id='openCCField' />
    </div>

    <label for="pmt-authorizenet_aim" class="radioButtonLabel">Credit Card</label>



    <div class="fec-credit-card-info" style="display: none;">

      <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>
    <div class="fec-box-check-radio">
      <input type="radio" name="payment" value="cod" id="pmt-cod">
    </div>

    <label for="pmt-cod" class="radioButtonLabel">Cash</label>

    <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>
  <span class="fec-fieldset-legend">Special Instructions / Order Comments</span>

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