Restore the button to its original color when the dropdown menu is devoid of options

Question

Restore the button to its original color when the dropdown menu is devoid of options

Is it possible to change the button colors back to their original state automatically when a user deselects all options from my dropdown menu? The user can either uncheck each option box individually or click on the "clear" button to clear all selections. I tried using if-else statements but it did not work as expected.

var i = $("li").index( $(this).parent() );

  if ( i === 1 ) {
    $('btn_clear').css('background', 'blue');
  } else if ( i === 2 ) {

View my BOOTPLY demonstration here: BOOTPLY

javascript jquery

Answer 1

Answer №1

Make a simple adjustment to your click handlers as shown below:-

$(".products .checkbox, .availability .checkbox").on("click", function(e) {

  var menu = $(this).closest('.dropdown-menu');

  var checkCount = menu.find(':checked').length;

  $('.btn_clear', menu).css('background', checkCount > 0 ? 'blue' : 'grey');
  $('.btn_apply', menu).css('background', checkCount > 0 ? 'green' : 'yellow');

});

This code specifically calculates the number of checked items in the dropdown and changes their color accordingly.

Visit Bootply

Note:

Below is the revised code for the clear handler.

$(".btn_clear").on('click', function (e) {
    e.stopPropagation();
    var menu = $(this).closest('.dropdown-menu');
    menu.find('input[type="checkbox"]').prop('checked', false);
    $('.btn_apply', menu).css('background', 'yellow');
});

Answer 2

Make a simple adjustment to your click handlers as shown below:-

$(".products .checkbox, .availability .checkbox").on("click", function(e) {

  var menu = $(this).closest('.dropdown-menu');

  var checkCount = menu.find(':checked').length;

  $('.btn_clear', menu).css('background', checkCount > 0 ? 'blue' : 'grey');
  $('.btn_apply', menu).css('background', checkCount > 0 ? 'green' : 'yellow');

});

This code specifically calculates the number of checked items in the dropdown and changes their color accordingly.

Visit Bootply

Note:

Below is the revised code for the clear handler.

$(".btn_clear").on('click', function (e) {
    e.stopPropagation();
    var menu = $(this).closest('.dropdown-menu');
    menu.find('input[type="checkbox"]').prop('checked', false);
    $('.btn_apply', menu).css('background', 'yellow');
});

Answer 3

Answer №2

To ensure a default color value is always set, you can use the following approach:

var index = $('li').index($(this).parent()),
    // Set the default color for the button.
    color = 'red';

if (index === 1) {
    color = 'blue';
} else if (index === 2) {
    color = 'green';
} // Add more cases as needed

// Optimize code by centralizing color assignment.
$('#btn_clear').css('background', color);

Answer 4

To ensure a default color value is always set, you can use the following approach:

var index = $('li').index($(this).parent()),
    // Set the default color for the button.
    color = 'red';

if (index === 1) {
    color = 'blue';
} else if (index === 2) {
    color = 'green';
} // Add more cases as needed

// Optimize code by centralizing color assignment.
$('#btn_clear').css('background', color);

Answer 5

Answer №3

One approach worth considering is using the jQuery method .addClass() and .removeClass(), followed by defining the desired color for that class. By doing so, you can maintain a clear separation between application logic and styling concerns.

Styling

.blue-text {
  color: blue;
}

jQuery Script

var index = $("li").index( $(this).parent() );

if ( index === 1 ) {
  $('btn_clear').addClass('blue-text');
} else if ( index === 2 ) {
  $('btn_clear').removeClass('blue-text');
}

Answer 6

One approach worth considering is using the jQuery method .addClass() and .removeClass(), followed by defining the desired color for that class. By doing so, you can maintain a clear separation between application logic and styling concerns.

Styling

.blue-text {
  color: blue;
}

jQuery Script

var index = $("li").index( $(this).parent() );

if ( index === 1 ) {
  $('btn_clear').addClass('blue-text');
} else if ( index === 2 ) {
  $('btn_clear').removeClass('blue-text');
}

Restore the button to its original color when the dropdown menu is devoid of options

Answer №1

Answer №2

Answer №3

Styling

jQuery Script

Similar questions

ajaxform is not providing the correct response

Exploring Angular unit testing using Jasmine: Techniques to customize or delete spyOn

The accumulation of MVC 3 Ajax requests is becoming overwhelming

Content within iframe is failing to load correctly on both Firefox and Internet Explorer browsers

Tired of the premium content on Medium.com. How can I conceal premium posts that are aimed at a specific class within a parent element?

Guide to implementing hapi-auth-jwt2 authorization on a specific route within hapi.js?

Submitting a Django form using AJAX technology

Ways to merge multiple cells horizontally in a table right from the beginning

Validate Bootstrap - Transmit data from all form fields to external PHP script

Using the POST method in Node.js is not functioning properly on the Replit server when using express

"Exploring the method of adding information to a table with the help of

Execute React program within VM Azure

Utilizing the hcSticky plugin for creating a scrolling effect on webpage content

Grab a hold of the currently active controller in Angular

AngularJS's ScrollTo function allows users to scroll to a specific

Using the set() method in Firestore with the merge option does not function properly when implemented in Node.js

Dealing with an Incorrect Date in JavaScript

Submitting data using Angular's POST method

The app is not showing the Post Request message after it has been sent from the UI front end

Invalid Jquery syntax: Anticipated an assignment or function call but encountered an expression instead