Question

我正在创建一个插件，我添加了一些字段。我需要激活此自定义字段，只有用户选中一个复选框。

我这样做

<?php
echo '<input type="checkbox" name="mycheckbox" id="mycheckbox" value="0" />';
echo '<div id="mycheckboxdiv" style="display:none">';

              woocommerce_wp_text_input( array( 'id' => "_bulkdiscount_quantity_$i", 'label' => __( 'Quantity (min.)', 'wc_bulk_discount' ), 'type' => 'number', 'description' => __( 'Enter the minimal quantity below apply the discount', 'wc_bulk_discount' ), 'custom_attributes' => array(
                                'step' => '1',
                                'min' => '1'
                            ) ) );
                            woocommerce_wp_text_input( array( 'id' => "_bulkdiscount_discount_$i", 'type' => 'number', 'label' => __( 'Discount (%)', 'wc_bulk_discount' ), 'description' => __( 'Enter the discount in percents', 'wc_bulk_discount' ), 'custom_attributes' => array(
                                    'step' => 'any',
                                    'min' => '0',
                                    'max' => '100'
                                ) ) );
              echo '</div>';

?>

<script type="text/javascript">


$(document).ready(function() {
    $('#mycheckbox').change(function() {
        $('#mycheckboxdiv').toggle();
    });
});

</script>

但如果我选择复选框，则我的字段不会出现。哪里错了？

由于

Answer 1

你的javascript看起来很好。附上工作实例。你在页面上有jQuery设置吗？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="checkbox" name="mycheckbox" id="mycheckbox" value="0" />
<div id="mycheckboxdiv" style="display:none">
  Content
</div>

<script type="text/javascript">
	$(document).ready(function() {
	    $('#mycheckbox').change(function() {
	        $('#mycheckboxdiv').toggle();
	    });
	});
</script>

Answer 2

在Wordpress中，jQuery需要引用为jQuery，而不是$。试试这个：

<script type="text/javascript">

jQuery(document).ready(function() {
    jQuery('#mycheckbox').change(function() {
        jQuery('#mycheckboxdiv').toggle();
    });
});

</script>

另一种方法是使用Immediately-Invoked Function Expression (IIFE)，从而将$定义为jQuery：

<script type="text/javascript">

(function($){

    $(document).ready(function() {
        $('#mycheckbox').change(function() {
            $('#mycheckboxdiv').toggle();
        });
    });

})(jQuery)

</script>

条件复选框和活动字段

2 个答案: