Javascript 是否可以将jQuery filter（）与特定的复选框状态一起使用？

我一直在玩Jquery，试图用Bootstrap4的输入组做一些很酷的事情。其思想是，当用户选中复选框时，包含该元素的输入组将变为绿色

我想我可以使用“.filter”帮助我保持代码的整洁，但我不确定我是否正确。请参阅下面我的代码片段

$('.form-checkbox').filter(function () {
  return ($(this).is(':checked'))
}).toggleClass("sub-green");

---

这是我目前的尝试。如果我能在这方面得到任何帮助，我将不胜感激。

您的逻辑中有几个问题。首先，当复选框的checked属性更改时，需要更改类。为此，请在

change

事件处理程序中执行代码

其次，您不需要

filter（）

。相反，您需要使用

this

来影响引发事件的元素。然后，您可以向

toggleClass（）

提供

checked

属性，以便根据需要添加或删除该类

最后，您需要将类放在父

input group text

元素上，而不是复选框本身。为此，请使用

closest（）

。试试这个：

$('.form-checkbox').change(function() {
  $(this).closest('.input-group-text').toggleClass("sub-green", this.checked);
});

//按下enter键时触发折叠
$（“#时事通讯电子邮件”）.keydown（功能（事件）{
如果（event.keyCode==13）{
event.preventDefault（）；
$（this）.最近的（“div”）.find（#subscribe collapse”）.trigger（'click'）；
返回false；
}
});
$（“.btn nl collapse”）。单击（函数（）{
$（此）.toggleClass（“亚黑色”）；
});
//复选框样式
$（'.form复选框'）.change（函数（）{
$（this）.closest（'.input group text'）.toggleClass（“亚绿色”，this.checked）；
});
*{
边界半径：0！重要；
}
.bg小学{
背景色：#ededed！重要；
}
.秒间隔垫圈xl{
填充：8rem；
}
/*==其他样式==*/
/* ======================= */
.body链接外部：：之后{
内容：“\f08e”；
字体系列：Fontsome；
字体风格：普通；
字体大小：正常；
文字装饰：继承；
左边距：3倍；
}
.免责声明{
字体大小：.7rem；
}
/*==表单样式==*/
/* ================= */
.表格隐藏{
显示：无；
}
标签{
保证金：0；
}
.form元素{
最小宽度：280px；
边界：无；
背景色：#fff；
边框：1px实心#ccc；
过渡：缓解所有压力；
}
.form元素：焦点{
最小宽度：280px；
边界：无；
背景色：#fefdf3；
过渡：缓解所有压力；
边框：1px实心#ccc；
盒影：无；
大纲：0无；
}
.btn nl崩溃{
边框：1px实心#ccc；
背景色：#fff；
过渡：放松一切；
}
.btn nl折叠：悬停，
.btn-nl-collapse.sub-black{
边框：1px实心#222；
背景色：#222；
颜色：#fff；
过渡：缓解所有压力；
}
.btn nl崩溃：焦点{
边框：1px实心#ccc；
盒影：无；
大纲：0无；
}
.form元素：：-webkit输入占位符{
颜色：#777！重要；
不透明度：1；
过渡：缓解所有压力；
}
.form元素：-moz占位符{
颜色：#777！重要；
不透明度：1；
过渡：缓解所有压力；
}
.form元素：：-moz占位符{
颜色：#777！重要；
不透明度：1；
过渡：缓解所有压力；
}
.form元素：-ms输入占位符{
颜色：#777！重要；
不透明度：1；
过渡：缓解所有压力；
}
.form元素：焦点：--webkit输入占位符{
不透明度：0；
过渡：缓解所有压力；
}
.form元素：焦点：-moz占位符{
不透明度：0；
过渡：缓解所有压力；
}
.form元素：焦点：--moz占位符{
不透明度：0；
过渡：缓解所有压力；
}
.form元素：焦点：-ms输入占位符{
不透明度：0；
过渡：缓解所有压力；
}
.检查输入：禁用{
背景色：#fff；
}
.input-group-text.sub-green{
背景色：rgba（156,195,32,0.2）；
边框：1px实心@9cc320；
}

首先，您需要执行：

$('.form-checkbox').filter(function () {
  return ($(this).is(':checked'))
}).toggleClass("sub-green");

更改其中一个
复选框时

您可以在（'change'）上使用
事件，如：

$(".form-checkbox").on('change',function() {
  // example
  if ($(this).is(':checked')) {
    // this OR target 
    $(this).addClass("sub-green");
  } else {
    // this OR target
    $(this).removeClass('sub-green');
  }
  // or
  $('.form-checkbox').filter(function () {
     return ($(this).is(':checked'))
  }).toggleClass("sub-green");
})

问题是？我只是想澄清一下，如果我想使用过滤器，我会使用它吗？或者这是一个糟糕的选择吗？最终这是一个干净的例子，正是我想要的。感谢您的帮助？您可以，但在这种情况下，这将是一个错误的选择，因为您当前的逻辑在第一次单击时添加类（选中该框），然后在再次单击复选框时将其保持打开状态，然后在下一次单击时将其删除。您需要将逻辑更改为几行，以检查当前状态并将其删除，这将在一行中完成所有操作。