Question

我目前正在尝试根据是否检查列表中的复选框输入（至少为1，最小值）来运行jQuery命令。基本上，如果选中任何复选框，我会使另一个元素看起来处于活动状态，但如果选中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语句？

Answer 1

检查整个集合而不仅仅是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

Answer 2

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

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

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

Answer 3

使用toggeClass并检查checked复选框的长度。

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

<强> FIDDLE

Answer 4

如果取消选中一个框（在更改时），您需要迭代所有框，并查看是否还有任何框，您可以使用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");
        }
    }
});

Answer 5

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

如果至少有一个复选框输入被“检查”，则为addClass;如果没有选中，则为removeClass

5 个答案: