Question 166073 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can jQuery be used to list products on WordPress?

I need some help.

I need to display the product listing only when the user checks the checkbox and hides it when the user deselects the checkbox, I tried it below but it is not working as expected.

The .hiddenBlock class belongs to the product listing and the showBlock class belongs to an image that I need to display if no product is selected.

document.addEventListener('DOMContentLoaded', function () {
    jQuery(function ($) {
        $('.jet-checkboxes-list').click(function () {
            if ($('.jet-checkboxes-list').filter(':not(:checked)')) {
                $(".hiddenBlock").hide();
                $(".showBlock").show();
            }
            if ($('.jet-checkboxes-list').filter(':checked')) {
                $(".hiddenBlock").delay(3500).fadeIn(500);
                $(".showBlock").hide();
            }
        });
    });
    
});

Can someone help me?

Thanks.

Tags:

2

Answers


  1. 0

    try this

    jQuery(function ($) {
        $('.jet-checkboxes-list').click(function () {
            if ($('.jet-checkboxes-list').is(':checked')) {
                $(".hiddenBlock").hide();
                $(".showBlock").show();
            }else{
                $(".hiddenBlock").delay(3500).fadeIn(500);
                $(".showBlock").hide();
            }
        });
    });
    Login or Signup to reply.
  2. 0

    1st: Use change event for checkbox,radio input

    2nd: For only this checkbox you can use if(this.checked){ .... }else{ .... }

    3rd: For multiple checkboxs/product you’ll need to use $('.jet-checkboxes-list:checked').length

    jQuery(function ($) {
  $('.jet-checkboxes-list').on('change' ,function () {
      if ($('.jet-checkboxes-list:checked').length) {
          console.log($('.jet-checkboxes-list:checked').length + ' Product selected');
          //$(".hiddenBlock").hide();
          //$(".showBlock").show();
      }else{
        console.log('No Product selected');
        //$(".hiddenBlock").delay(3500).fadeIn(500);
        //$(".showBlock").hide();
      }   
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label><input type="checkbox" class="jet-checkboxes-list" />Product One</label>
</div>
<div>
  <label><input type="checkbox" class="jet-checkboxes-list" />Product two</label>
</div>
<div>
  <label><input type="checkbox" class="jet-checkboxes-list" />Product Three</label>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search