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是否已被添加，因此您需要委派或执行我的操作：将其插入HTML并将其隐藏

然后您将其附加到收音机，而不是收音机的父项

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

您确实也应该更新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 -->

Answer 2

因为我现在有了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>