jQuery基于复选框状态显示/隐藏 [英] Jquery Show / Hide based on checkbox status

问题描述

我正在尝试自定义woocommerce中的本地取件运输选项.基本上，如果从woocommerce设置中选择了本地取件"选项，它将在结帐每种商品时显示.我想以仅在选定产品中显示的方式对其进行自定义.

I am trying to customize the local pickup shipping option in woocommerce. Basically, if a Local Pickup option is selected from the woocommerce settings, it will show up on checkout for every product. I'd like to customize it in a way that it will only show up for selected product.

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

So I added a new checkbox custom field meta on the product edit page. Checkbox should be checked if the local pickup is available on the product or unchecked if local pickup not available.

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

My code in functions.php looks like this:

<?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 );
}
?>

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

Everything working great so far, checkbox is displaying and saving .

现在，正如我之前提到的，本地取件选项在每个产品上都可用.我想对其进行自定义，使其仅在此复选框(_shipping_collection)为checked

Now as I mentioned earlier, the local pickup option is available on every single product. I would like to customize it the way that it will only show on products where this checkbox ( _shipping_collection ) is checked

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

The Local Pickup element that displays on the checkout is generated here: 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来识别标签.

I added the ID selector in the label, so I would be able to identify the label by its ID when hiding it.

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

On the front end checkout, the code will generate the following ID:

#shipping_method_0_local_pickup

因此，如果我现在尝试使用CSS将其隐藏:

So if I now try to hide it with CSS using:

#shipping_method_0_local_pickup {
display: none;
}

效果很好！结帐时隐藏了该字段.

It works great!, the field is hidden from the checkout.

因此，我现在想出我应该使用Jquery来实现复选框功能，并且在四处搜索之后，我找到了一个示例脚本，因此在更改了选择器以适合我的选择器之后，我得到了以下结果:/p>

So I have now figured that I should be using a Jquery for the checkbox functionality and after some searching around I digged up an example script and so after changing the selectors in it to fit my selectors, I ended up with this:

$('#_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

I figured that I this script should probably be placed in this file here: https://github.com/woothemes/woocommerce/blob/master/assets/js/frontend/add-payment-method.js

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

But unfortunately that doesn't seem to work.

您有什么建议吗?

推荐答案

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>

这篇关于jQuery基于复选框状态显示/隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！