Javascript 单击按钮的两个不同部分时组合两个过滤器

我想在单击按钮的两个不同部分时合并两个过滤器。现在，当我单击一个按钮时，它会删除上一个按钮的选择。我已经尝试了几个功能，但我没有能够得到正确的逻辑

我已经写了一个我当前状态的模式

HTML

它也在里面

还有，很高兴拥有：

• 我想知道如何颜色按钮一旦被选中
• 添加一个重置按钮（我想在数据类别中添加“重置”会很容易）

---

提前感谢您的建议和建议！

我已经为您的js提琴提供了一个使用CSS类的解决方案

JavaScript

$('.btn').removeClass('btn-selected'); // resetting all buttons to remove class

/* other code */

$(this).addClass('btn-selected'); // adding class to clicked button

CSS中的问题是选择器中缺少

.btn-selected { }

---

一种方法是使用

单选按钮。它们允许每组进行一次选择

一个缺点是你不能取消选中一个单选按钮，除非在同一组中选择另一个单选按钮，所以我在每个组中都添加了一个“重置”按钮

选择后，我将根据选中的按钮构建一个类选择器字符串


$（“.mycb输入”）.on（'change'，函数（e）{
//选择所有选中的按钮。
var$checked=$（'.mycb:checked'）；
//构建一个包含所有选中值的数组。
var checked_classes=$checked.map（函数（）{
返回此.value；
}).toArray（）；
//将基线“element”类添加到数组中。
选中的类。取消移位（'.element'）；
//构建类选择器字符串。
变量类=选中的类。联接（'.'）；
//调试类选择器字符串。
//console.log（类）；
//隐藏所有元素。
$（'.element'）.hide（）；
//显示与类选择器字符串匹配的元素。
$（classes.fadeIn（）；
});
$（'.reset'）。在（'click'，function（）上{
var$container=$（this）.closest（'p'）；
$（'input'，$container）.prop（'checked'，false）.last（）.trigger（'change'）；
})；
btn已选择{
颜色：红色；
}
.mycb输入{
显示：无；
}
.mycb span{
背景色：白色；
边框：1px实心#CCC；
边界半径：.3em；
填充：0.3em；
光标：指针；
用户选择：无；
}
.mycb输入：选中+span{
背景颜色：浅蓝色；
}

语言：
EN
信息技术
重置

材料：
A.
B
C
重置

恩A

恩B

it C

它是b

您需要创建一种方法来知道每个子组中的哪个被选中（如果有的话）。然后当有人单击按钮时，您会找到标记为选中的所有按钮，并执行筛选。这可能是通过在按钮上放置一个类并查找该类的元素来实现的。但是我强烈建议你减少你的问题，删除“还有，很好拥有”。您的问题应限制在单个问题的范围内，否则会过于宽泛。另一种了解组中选择哪个选项的方法是将按钮转换为单选按钮，前提是在给定时间组中只允许选择一个选项。
$('.btn').removeClass('btn-selected'); // resetting all buttons to remove class

/* other code */

$(this).addClass('btn-selected'); // adding class to clicked button

.btn-selected { }