创建复选框

我试图为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/

谢谢。

来源

2013-03-26 user1752759

你的分析输出是什么样的？ –

多文章：http://wordpress.stackexchange.com/q/92398 – brasofilo

尽管jsFiddle工作得很好，但上面的脚本不会工作，因为它不会在Wordpress的源中输出正确。

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

来源

2013-03-30 18:18:41 user1752759

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

我会在你的情况做的是检查，如果代码被由内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"); 
    }); 
});

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

来源

2013-03-26 13:59:09

感谢您的快速反应罗宾。是的，这似乎是奇怪的，它似乎是在jsFiddle工作，但不是在_Wordpress_。 javaScript/jQuery和PHP不是我的强项，所以我在实现解决方案时有点困难（创建'alert（）'和监听'DOM ready'）。如果问题不多，可否将** [this]（http://pastebin.com/H1tCJKg0）**脚本放到您的''functions.php'文件的任意主题的末尾以重现问题？我真的很感激它，并感谢你的所有帮助。 – user1752759

您的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！

来源

2013-03-27 14:56:01

回答

相关问题