Issue with Bootstrap form group checkboxes not being checked when switching between Nav Pills

Question

Issue with Bootstrap form group checkboxes not being checked when switching between Nav Pills

Check out my work on JSFiddle: https://jsfiddle.net/pb23Ljd8/5/

I've utilized Bootstrap nav-pills to display all products and categorize them like this:

https://i.sstatic.net/oQxTk.png

The checkboxes are based on this design:

To keep track of the checked products in each tab, I have implemented the following code:

jQuery(document).ready(function($) {

  jQuery(".select-product").change(function() {

    jQuery(".counter").text(jQuery("[type='checkbox']:checked").length);

  });

});

However, there seems to be an issue with the glyphicon check icons not showing up on the second and third tabs. Despite this, the counter increments correctly when selecting products from these tabs. The challenge lies in ensuring that the products are visually checked across all tabs for a seamless user experience.

Any suggestions on how to achieve this?

Edit: It's worth mentioning that the product list is dynamically fetched from CMS, which might be contributing to the problem due to ID duplication.

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

Let's break down the issue before attempting to resolve it and pinpoint the exact problem.

To start, we should investigate if removing the content from tab 1b eliminates the problem.

Upon testing, we found that removing the checkboxes from the first tab allows the checkboxes on the second and third tabs to function correctly.

Check out Fiddle #1 for reference

Another approach could be changing the id of the checkboxes (keeping in mind that ids must be unique).

If we modify the id of the first checkbox to 1a, we can see that now Book #1 is functioning properly.

Explore Fiddle #2 for more details

It appears that the issue stems from using checkboxes with identical id values (source). The current challenge is:

How do we synchronize checking multiple checkboxes when one is selected?

(or something along those lines)

A potential solution would involve:

Assigning similar checkboxes the same class (e.g., checkboxes for Book #1 could have class b1)
Using jQuery or JavaScript to ensure all related checkboxes behave consistently

See Working Example here

UPDATE

To dynamically assign classes based on IDs for matching products, you can pass PHP arrays like $products_id_array as follows:

var productIDs = <?php echo json_encode($products_id_array) ?>;

You can then include a snippet of jQuery code in the fiddle:

productIDs.forEach(function(val, key) {
    jQuery('.' + val).on('change', function(){
        jQuery('.' + val).prop('checked',this.checked);
    });
})

Answer 2

Let's break down the issue before attempting to resolve it and pinpoint the exact problem.

To start, we should investigate if removing the content from tab 1b eliminates the problem.

Upon testing, we found that removing the checkboxes from the first tab allows the checkboxes on the second and third tabs to function correctly.

Check out Fiddle #1 for reference

Another approach could be changing the id of the checkboxes (keeping in mind that ids must be unique).

If we modify the id of the first checkbox to 1a, we can see that now Book #1 is functioning properly.

Explore Fiddle #2 for more details

It appears that the issue stems from using checkboxes with identical id values (source). The current challenge is:

How do we synchronize checking multiple checkboxes when one is selected?

(or something along those lines)

A potential solution would involve:

Assigning similar checkboxes the same class (e.g., checkboxes for Book #1 could have class b1)
Using jQuery or JavaScript to ensure all related checkboxes behave consistently

See Working Example here

UPDATE

To dynamically assign classes based on IDs for matching products, you can pass PHP arrays like $products_id_array as follows:

var productIDs = <?php echo json_encode($products_id_array) ?>;

You can then include a snippet of jQuery code in the fiddle:

productIDs.forEach(function(val, key) {
    jQuery('.' + val).on('change', function(){
        jQuery('.' + val).prop('checked',this.checked);
    });
})

Answer 3

Answer №2

Check out this JavaScript code snippet at this link. It's designed to be effective.

 jQuery(".select-product").change(function() {
      var checkValue = jQuery(this).prop('checked');
      $('.select-product#' + jQuery(this)[0].id).each(function() {
          if (checkValue == true) {
              jQuery(this).prop('checked', true)
          } else {
              jQuery(this).prop('checked', false);
          }
      });
      var uniqueId = [];
      jQuery("[type='checkbox']:checked").each(function() {
          uniqueId.push(jQuery(this)[0].id);
      });


      Array.prototype.getUnique = function() {
          var u = {},
              a = [];
          for (var i = 0, l = this.length; i < l; ++i) {
              if (u.hasOwnProperty(this[i])) {
                  continue;
              }
              a.push(this[i]);
              u[this[i]] = 1;
          }
          return a;
      }
      jQuery(".counter").text(uniqueId.getUnique().length);          
  });

Answer 4

Check out this JavaScript code snippet at this link. It's designed to be effective.

 jQuery(".select-product").change(function() {
      var checkValue = jQuery(this).prop('checked');
      $('.select-product#' + jQuery(this)[0].id).each(function() {
          if (checkValue == true) {
              jQuery(this).prop('checked', true)
          } else {
              jQuery(this).prop('checked', false);
          }
      });
      var uniqueId = [];
      jQuery("[type='checkbox']:checked").each(function() {
          uniqueId.push(jQuery(this)[0].id);
      });


      Array.prototype.getUnique = function() {
          var u = {},
              a = [];
          for (var i = 0, l = this.length; i < l; ++i) {
              if (u.hasOwnProperty(this[i])) {
                  continue;
              }
              a.push(this[i]);
              u[this[i]] = 1;
          }
          return a;
      }
      jQuery(".counter").text(uniqueId.getUnique().length);          
  });

Issue with Bootstrap form group checkboxes not being checked when switching between Nav Pills

Answer №1

How do we synchronize checking multiple checkboxes when one is selected?

Answer №2

Similar questions

Utilizing a for loop in PHP and the jQuery show/hide method can dynamically display a corresponding number of div elements based on the number

What is the best way to transfer an excel file to a server using AngularJS in a Django project?

Encoding large files using the Base64 format

Unique styling implementation for element situated underneath Angular 6 router-outlet

Issue with Typescript in react: JSX element lacks construct or call signatures

Improving Performance in Vue by Reducing `$set` Usage

Submitting information to an HTML page for processing with a JavaScript function

angularjs: how to connect input date picker to parameters value

How to extract HTML elements using Selenium

"Looking to add some flair to your website with a

Issues with the functionality of minimized AngularJS JavaScript files

Facing difficulty in removing object in Rails with Ajax

Having trouble with installing "npm install semantic-ui-react semantic-ui-css"? Any ideas on how to fix it?

Converting form data into an object using JavaScript (Encountering an error: Cannot access property 'name' of undefined)

Moving a component beyond its container using a query

The Infinite scroll feature fails to function once the page is loaded using ajax

Looking to showcase a loading gif inside a popover before swapping it out with ajax-generated content

How can I efficiently include all css from node_modules in vuejs?

What could be causing the last LI to drop onto a new line when floating UL to the right?

Submitting information to the server utilizing a POST request through jQuery