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