javascript - Jquery 根据复选框状态显示/隐藏

Question

我正在尝试在 woocommerce 中自定义本地取 cargo 输选项。基本上，如果从 woocommerce 设置中选择本地取货选项，它将显示在每个产品的结帐时。我想对其进行自定义，使其仅针对选定的产品显示。

因此，我在产品编辑页面上添加了一个新的复选框自定义字段元。如果产品可提供本地取货，则应选中该复选框；如果本地取货不可用，则应取消选中该复选框。

我在functions.php中的代码如下所示:

<?php
// Display Fields
add_action( 'woocommerce_product_options_shipping', 'woo_add_custom_general_fields' );

// Save Fields
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );

function woo_add_custom_general_fields() {

  global $woocommerce, $post;

  echo '<div class="options_group">';

  // Checkbox Local Pickup / Collection Available
  woocommerce_wp_checkbox( 
  array( 
      'id'            => '_shipping_collection', 
      'wrapper_class' => 'show_if_simple', 
      'label'         => __('Local Pickup / Collection Available', 'woocommerce' ), 
      'description'   => __( 'This product is available for collection', 'woocommerce' ) 
      )
  );

  echo '</div>';    
}

function woo_add_custom_general_fields_save( $post_id ){
    // Checkbox Local Pickup / Collection Available - Save Data
    $collection_checkbox = isset( $_POST['_shipping_collection'] ) ? 'yes' : 'no';
    update_post_meta( $post_id, '_shipping_collection', $collection_checkbox );
}
?>

到目前为止一切正常，复选框正在显示并保存。

现在，正如我之前提到的，每件产品都提供本地取货选项。我想对其进行自定义，使其仅显示在选中此复选框 (_shipping_collection) 的产品上选中

结帐时显示的本地取件元素是在此处生成的: https://github.com/woothemes/woocommerce/blob/master/templates/cart/cart-shipping.php

使用以下代码:

<ul id="shipping_method">
                    <?php foreach ( $available_methods as $method ) : ?>
                        <li>
                            <input type="radio" name="shipping_method[<?php echo $index; ?>]" data-index="<?php echo $index; ?>" id="shipping_method_<?php echo $index; ?>_<?php echo sanitize_title( $method->id ); ?>" value="<?php echo esc_attr( $method->id ); ?>" <?php checked( $method->id, $chosen_method ); ?> class="shipping_method" />
                            <label for="shipping_method_<?php echo $index; ?>_<?php echo sanitize_title( $method->id ); ?>" id="shipping_method_<?php echo $index; ?>_<?php echo sanitize_title( $method->id ); ?>"><?php echo wp_kses_post( wc_cart_totals_shipping_method_label( $method ) ); ?></label>
                        </li>
                    <?php endforeach; ?>
                </ul>

我在标签中添加了 ID 选择器，因此在隐藏标签时我可以通过 ID 来识别标签。

在前端结账时，代码将生成以下ID:

#shipping_method_0_local_pickup

所以如果我现在尝试使用 CSS 隐藏它:

#shipping_method_0_local_pickup {
display: none;
}

效果很好!，该字段在结帐时是隐藏的。

所以我现在认为我应该使用 Jquery 来实现复选框功能，经过一番搜索后，我找到了一个示例脚本，因此在更改其中的选择器以适合我的选择器之后，我最终得到了这个:

$('#_shipping_collection').click(function() {
    if($(this).is(":checked")) {
        $('#shipping_method_0_local_pickup').show();
    } else {
        $('#shipping_method_0_local_pickup').hide();
    }
    })

我认为这个脚本应该放在这个文件中: https://github.com/woothemes/woocommerce/blob/master/assets/js/frontend/add-payment-method.js

但不幸的是，这似乎不起作用。

您有什么建议吗？

Answer 1

1. jQuery 是否已加载？
2. 页面加载后是否添加事件处理程序 -
3. ID 是否唯一？

像这样 - 更简单的代码，

$(function() { 
  $('#_shipping_collection').on("click",function() {
    $('#shipping_method_0_local_pickup').toggle(this.checked);
  }); 
});

示例

$(function() {
  $('#_shipping_collection').on("click", function() {
    $('#shipping_method_0_local_pickup').toggle(this.checked);
  });
});

#shipping_method_0_local_pickup { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="_shipping_collection" id="_shipping_collection">
<label for="_shipping_collection" id="_shipping_collection"></label>

<div id="shipping_method_0_local_pickup">
  I should see this text if only if the checkbox is checked
</div>