创建复选框答案

【问题标题】：Creating a Checkbox创建复选框
【发布时间】：2013-03-31 02:18:41
【问题描述】：

我正在尝试在 Wordpress 中为我的一个小部件创建一个复选框选项，以便在选中它时显示/显示一些内容。

问题是当复选框被选中时它不会显示内容。

    <p>
        <input type="checkbox" id="tcheckbox" class="checkbox" name="<?php echo $this->get_field_name('checkbox'); ?>" value="1" <?php checked( '1', $checkbox ); ?>/>
        <label for="<?php echo $this->get_field_id('checkbox');?>"><?php _e('My Checkbox.'); ?></label>

        <div id="tcheckboxdiv" style="display:none">
            <p>T One:</p>
            <p><input type="text" class="widefat" name="one" placeholder="1" readonly></p>
            <p>T Two:</p>
            <p><input type="text" class="widefat" name="two" placeholder="2" readonly></p>
        </div>
    </p>            

    <script type="text/javascript">
    jQuery(window).load(function() {
        jQuery("#tcheckbox").change(function() {
            jQuery("#tcheckboxdiv").fadeToggle("slow");
        });
    });
    </script>

由于我对 javaScript 和 PHP 还很陌生，所以我想知道上面是否有任何冲突的脚本，因为它似乎在这里工作得很好：http://jsfiddle.net/GhZDP/

谢谢。

【问题讨论】：

你的解析输出是什么样的？
多帖：wordpress.stackexchange.com/q/92398

标签： php javascript html wordpress widget

【解决方案1】：

这个问题很难重现，因为它实际上在您提供的 Fiddle 中工作。

在您的情况下，我会做的是检查代码是否通过在 jQuery(window).load() 中输入 alert() 来执行

之后，尝试不同的方法来监听DOM ready：

jQuery(function () {
    // Code here
});

jQuery(document).ready(function() {
    // Code here
});

这并不是您解决方案的真正答案，而是帮助您调试此问题的支持。但是它太大（并且变得难以阅读），无法在评论中发布。

您也可以尝试这样的委托事件侦听器（这需要您将“widgetForm”ID 添加到您的<form> 标记中）：

jQuery(function () {
    jQuery("#widgetForm").on("change", "#logocheckbox", function () {
        // Your code goes here; e.g. $("#logocheckboxdiv").fadeToggle("slow");
    });
});

但同样，我只是猜测并帮助您调试，因为我无法真正重现您的问题。

【讨论】：

感谢罗宾的快速回复。是的，它似乎在 jsFiddle 中工作但在 Wordpress 中没有工作，这很奇怪。 javaScript/jQuery 和 PHP 不是我的强项，所以我在实现您的解决方案时遇到了一点困难（创建一个 alert() 并监听 DOM ready）。如果问得不多，您是否可以将 this 脚本放入您的任何主题的functions.php 文件中以重现问题？非常感谢您，并感谢您迄今为止提供的所有帮助。

【解决方案2】：

您的 jQuery 对象 $ 将无法在 WordPress 上运行，因为 WP 在 noConflict 模式下运行。您应该将 jQuery 称为 jQuery，而不是 $。

<script type="text/javascript">
jQuery(window).load(function() {
    jQuery('#logocheckbox').change(function() {
        jQuery("#logocheckboxdiv").fadeToggle("slow");
    });
});
</script>

另外，please don't post duplicate questions!

【讨论】：

【解决方案3】：

虽然 jsFiddle 运行良好，但上面的脚本无法正常工作，因为它没有在 Wordpress 的源代码中正确输出。

Wordpress 管理页面也使用 javaScript，这会导致编码冲突。

【讨论】：