CODEWITHSUNDEEP
jquerycheckboxinputaddclassremoveclass
Zanem
Zanem

Reputation: 31

addClass if at least one checkbox input is "checked", removeClass if none are checked

I'm currently trying to run a jQuery command based on whether or not checkbox inputs in a list (at least 1, minimum) are checked. Essentially, I'm making another element look active if any checkbox is checked, but want that active state/class to go away if 0 checkboxes are checked.

Here's my current jQuery:

$('#data.backup input.backup').change(function () {
  if ($(this).is(":checked")) {
    $('#sticky-button.backup').addClass("active");
  } else {
  $('#sticky-button.backup').removeClass("active");
  }
});

While the initial if statement works one way (adding the active class), the moment I uncheck any of the boxes, it runs the removeClass command. How could I adjust the code so that the else statement only runs when none of the inputs are checked?

Upvotes: 1

Views: 1911

Answers (5)

Amit Kumar
Amit Kumar

Reputation: 5962

$('#data.backup input.backup').change(function () {
  if ($(this).is(":checked")) {
    $('#sticky-button.backup').addClass("active");
  } else {
      var flag=0;
      $('#data.backup input.backup').each(function(){
          if ($(this).is(":checked")) {
              $('#sticky-button.backup').addClass("active");
            flag=1;             
          }
          if(flag == 0){
              $('#sticky-button.backup').removeClass("active");
          }
      });
  }
});

Upvotes: 0

Mark
Mark

Reputation: 861

You would need to iterate over all the boxes when one was unchecked (on change) and see if any were still checked, you can do this using jQuery's provided $.each function:

$('#data.backup input.backup').change(function () {
    if ($(this).is(":checked")) {
        $('#sticky-button.backup').addClass("active");
    } else {
        var areAnyChecked = false;

        $('#data.backup input.backup').each(function() {
            if ($(this).is(":checked")) { 
                areAnyChecked = true;
            });
        });

        if(areAnyChecked != true) {
            $('#sticky-button.backup').removeClass("active");
        }
    }
});

Upvotes: 0

ZiNNED
ZiNNED

Reputation: 2650

Use toggeClass and check the length of the checked checkboxes.

$("#data.backup input.backup").change(function()
{
    $("#sticky-button.backup").toggleClass("active", $("input.backup:checked").length > 0);
});

FIDDLE

Upvotes: 0

Code Maverick
Code Maverick

Reputation: 20415

var $allInputs = $('#data.backup input.backup');

$allInputs.change(function () 
{
    if ($allInputs.is(":checked"))
        $('#sticky-button.backup').addClass("active");

    else
        $('#sticky-button.backup').removeClass("active");
});

Upvotes: 0

adeneo
adeneo

Reputation: 318312

Check the entire collection instead of just this, is() will return true if any checkbox is checked

var boxes = $('#data.backup input.backup');

boxes.on('change', function () {
  if ( boxes.is(":checked") ) {
      $('#sticky-button.backup').addClass("active");
  } else {
      $('#sticky-button.backup').removeClass("active");
  }
});

You could shorten it with toggleClass

var boxes = $('#data.backup input.backup');

boxes.on('change', function () {
  $('#sticky-button.backup').toggleClass("active", boxes.is(":checked"));
});

FIDDLE

Upvotes: 3

Related Questions