Création d'une case à cocher

Question

J'essaie de créer une option de case à cocher pour l'un de mes widgets dans Wordpress, de sorte que lorsqu'il est coché, il affichera/révélera du contenu.

Le problème est qu'il ne révélera pas le contenu lorsque la case est cochée.

<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> 

Comme je suis assez nouveau pour javaScript et PHP, je me demandais s'il y a des scripts contradictoires ci-dessus, il semble fonctionner parfaitement bien ici: http://jsfiddle.net/GhZDP/

Merci.

Answer 1

Bien que le jsFiddle fonctionne parfaitement bien, le script ci-dessus ne fonctionnera pas car il n'est pas sorti correctement dans la source de Wordpress.

Les pages d'administration Wordpress utilisent également javaScript, ce qui provoque un conflit dans le codage.

Answer 2

Ce problème est assez difficile à reproduire car il fonctionne réellement dans le violon que vous avez fourni.

Ce que je ferais dans votre situation est de vérifier si le code est exécuté par juste jeter un alert() dans le jQuery(window).load()

Après cela, essayez différentes approches pour écouter DOM ready:

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

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

Cette n'est pas vraiment une réponse à votre solution mais plutôt un support pour vous aider à déboguer ce problème. C'était trop gros (et devenu illisible) pour poster dans un commentaire cependant.

Vous pouvez également essayer un écouteur d'événement délégué comme celui-ci (cela vous oblige à ajouter l'ID « widgetForm » à votre balise <form>):

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

Mais encore une fois, je suis juste deviner et vous aider debug puisque je ne peux pas vraiment reproduire votre problème.

Answer 3

Votre objet jQuery $ ne fonctionnera pas sur WordPress, car WP fonctionne en mode noConflict. Vous devez appeler jQuery comme jQuery, pas comme $.

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

De plus, please don't post duplicate questions!