addClass 如果至少一个复选框输入被“选中”，如果没有选中则 removeClass答案

【问题标题】：addClass if at least one checkbox input is "checked", removeClass if none are checkedaddClass 如果至少一个复选框输入被“选中”，如果没有选中则 removeClass
【发布时间】：2014-07-24 14:30:47
【问题描述】：

我目前正在尝试根据是否选中列表中的复选框输入（至少 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 语句只在没有检查任何输入时运行？

【问题讨论】：

勾选复选框时使用toggleClass。

标签： jquery checkbox input addclass removeclass

【解决方案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

【讨论】：

这很好用，正是我想要的！非常感谢。

【解决方案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");
});

【讨论】：

【解决方案3】：

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

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

FIDDLE

【讨论】：

【解决方案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");
        }
    }
});

【讨论】：

【解决方案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");
          }
      });
  }
});

【讨论】：