Cách làm một check box ẩn - hiện dùng jquery (ok)

<?php
<p class="form-row form-row-wide woocommerce-validated" id="checkbox_trigger_field" data-priority="">
<label class="checkbox ">
<input type="checkbox" class="input-checkbox " name="checkbox_trigger" id="checkbox_trigger" value="1"> Checkbox label
</label>
</p>
<p class="form-row form-row-wide" id="new_billing_field_field" data-priority="" style="display: block;">
<label for="new_billing_field" class="">New Billing Field Label</label>
<input type="text" class="input-text " name="new_billing_field" id="new_billing_field" placeholder="New Billing Field Placeholder" value="">
</p>
//	 Add a Checkbox to Hide/Show Checkout Field
 /**
 * @snippet       Add a Checkbox to Hide/Show Checkout Field - WooCommerce
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=21948
 * @author        Rodolfo Melogli
 * @compatible    WC 2.6.14, WP 4.7.2, PHP 5.5.9
 */
add_action( 'woocommerce_after_checkout_form', 'bbloomer_conditionally_hide_show_new_field', 6);
 
function bbloomer_conditionally_hide_show_new_field() {
   
  ?>
    <script type="text/javascript">
        jQuery('input#checkbox_trigger').change(function(){
             
            if (this.checked) {
                jQuery('#new_billing_field_field').fadeOut();
                jQuery('#new_billing_field_field input').val('');           
            } else {
                jQuery('#new_billing_field_field').fadeIn();
            }
             
        });
    </script>
    <?php
       
}

Last updated