创建复选框


Creating a Checkbox

我正在尝试创建一个复选框选项为我的一个小部件在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/

谢谢。

这个问题很难重现,因为它实际上是在您提供的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");
    });
});

但是,我只是猜测和帮助你调试,因为我不能真正重现你的问题。

你的jQuery对象$不会在WordPress上工作,因为WP在noConflict模式下运行。你应该把jQuery命名为jQuery,而不是$

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

还有,请不要重复提问!

虽然jsFiddle工作得很好,但上面的脚本不能工作,因为它没有在Wordpress的源代码中正确输出。

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