仅当复选框被选中时显示字段 - Show field only if checkbox is checked

Show field only if checkbox is checked

本文关键字：显示字段复选框 | 更新日期: 2023-09-27

我有以下代码:

<div class="dk-form-group">
        <label class="dk dk-control-label" for=""><?php _e( 'Manage Items?', 'dk' ); ?></label>
        <div class="dk dk-text-left">
            <?php dk_post_input_box( $post->ID, '_manage_items', array('label' => __( 'Enable item management', 'dk' ) ), 'checkbox' ); ?>
        </div>
    </div>
    <div class="dk-form-group">
        <label class="dk dk-control-label" for="_item_qty"><?php _e( 'Item Qty', 'dk' ); ?></label>
        <div class="dk dk-text-left">
            <input type="number" name="_item" id="_item" step="any" placeholder="10" value="<?php echo !empty( $_stock ) ? wc_stock_amount( $_stock ) : 1; ?>">
        </div>
    </div>

基本上你可以猜到，我试图显示输入字段只有当复选框被选中。

我一直在尝试添加以下代码:

$('_manage_items').click(function() {
  $('_item')[this.checked ? "show" : "hide"]();
});

所以我的最终代码是这样的:

<div class="dk-form-group">
            <label class="dk dk-control-label" for=""><?php _e( 'Manage Items?', 'dk' ); ?></label>
            <div class="dk dk-text-left">
                <?php dk_post_input_box( $post->ID, '_manage_items', array('label' => __( 'Enable item management', 'dk' ) ), 'checkbox' ); ?>
               <?php
            $('_manage_items').click(function() {
            $('_item')[this.checked ? "show" : "hide"]();
            }); ?>
            </div>
        </div>
        <div class="dk-form-group">
            <label class="dk dk-control-label" for="_item_qty"><?php _e( 'Item Qty', 'dk' ); ?></label>
            <div class="dk dk-text-left">
                <input type="number" name="_item" id="_item" step="any" placeholder="10" value="<?php echo !empty( $_stock ) ? wc_stock_amount( $_stock ) : 1; ?>">
            </div>
        </div>

但这只是抛出错误。因此，我不确定我是否将此代码段正确地添加到复选框代码中的正确位置，然后我不确定代码段$('_manage_items')和$('_item')中的名称是否正确输入。

try this:

$('input[name="_manage_items"]').click(function() {
  $('input[name="_item"]')[this.checked ? "show" : "hide"]();
});