addClass, если отмечен хотя бы один вход флажка, removeClass, если ни один не отмечен

В настоящее время я пытаюсь запустить команду jQuery в зависимости от того, отмечены ли входы флажков в списке (минимум 1, минимум). По сути, я заставляю другой элемент выглядеть активным, если установлен какой-либо флажок, но хочу, чтобы это активное состояние / класс исчезло, если отмечено 0 флажков.

Вот мой текущий jQuery:

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

Хотя первоначальный оператор if работает в одном направлении (добавление активного класса), в тот момент, когда я снимаю отметку с любого из флажков, он запускает команду removeClass. Как я могу настроить код так, чтобы оператор else выполнялся только тогда, когда ни один из входов не отмечен?


input checkbox jquery addclass removeclass
person Zanem    schedule 24.07.2014    source источник
comment
используйте toggleClass при установленном флажке.   -  person byJeevan    schedule 24.07.2014

Ответы (3)


arrow_upward
3
arrow_downward

Проверять всю коллекцию, а не только this, is() вернет true, если установлен какой-либо флажок

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");
  }
});

Вы можете сократить его с помощью toggleClass

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

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

FIDDLE

person adeneo    schedule 24.07.2014
comment
Это отлично работает, именно то, что я искал! Огромное спасибо. - person Zanem; 24.07.2014

arrow_upward
0
arrow_downward

Используйте toggeClass и проверьте длину флажков checked.

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

FIDDLE

person ZiNNED    schedule 24.07.2014

arrow_upward
0
arrow_downward

Вам нужно будет перебрать все поля, когда один из них не отмечен (при изменении), и посмотреть, были ли еще отмечены какие-либо флажки, вы можете сделать это, используя предоставленную jQuery функцию $ .each:

$('#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");
        }
    }
});
person Mark    schedule 24.07.2014