Jquery code not affecting my elements in wordpress


I am making a woocommerce site that sells cabinet doors. An option that my company is providing to customers is the ability to add custom pre-drilled holes to the cabinet doors. However, they don’t want the customer to see all the custom options if they haven’t selected the “Boring” checkbox. So I tried to make a jQuery file to hide and show the form elements depending on the checkbox being checked. Although I believe I properly enqueued the file into my site, it doesn’t seem to be affecting the elements and the console is not showing any errors. I am using a WooCommerce Product Add-on plugin which allows the checkbox to add to the total price of the product without affecting the price/sq. ft. of the product.

Here is the HTML code for the elements

<div class="required-product-addon product-addon product-addon-boring">

    <h3 class="addon-name">Boring <abbr class="required" title="Required field">*</abbr></h3>

<p class="form-row form-row-wide addon-wrap-276-boring-0-0">
    <label><input type="checkbox" class="addon addon-checkbox"  name="addon-276-boring-0[]" data-raw-price="7.50" data-price="7.5" value="yes"  /> Yes (<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>7.50</span>)</label>

<!--This is what I want to be hidden-->

<div class="product-addon product-addon-unit">

    <h3 class="addon-name">Unit </h3>

    <div class="addon-description"><p>Specify units for boring specs</p>


Here is the jQuery file I made to hide or show the elements when “addon-checkbox” is selected.

(function ($) {

$(".addon-checkbox").click(function() {
    if($(this).is(":checked")) {
    } else {


Here is how I enqueued the script.

function add_checkboxjquery() {
  wp_register_script('checkboxjquery', get_template_directory_uri() . '/js/checkboxjquery.js', array('jquery'),'1.1', true);    

add_action( 'wp_enqueue_scripts', 'add_checkboxjquery');

This doesn’t seem to do anything and no errors appear. I can’t seem to figure out what the next step is. The jQuery code does work fine when put in the console which puzzles me even more. Here is a link to a product page of the site for reference. Thank you in advance. http://mykitchencabinetdoors.com/product/sh1000/


Does it work if you go for if ($(this).prop('checked')) ?
Code shown works fine when you run it in console on that page. Actual code you you are using in the page is different though



just replace below part.It should work.

  if($(".addon-checkbox").is(":checked")) {
    } else {

Just added div in div.product-addon-unit



I made the changes, and the jQuery code seems to work exactly how it should when runt through the console, yet it doesn’t appear on the page. There must be an issue enqueueing (is that a word) the script. Thank you for your quick response.
– Luke Miller
8 mins ago



Add a Comment