Javascript 带有多个过滤器的jQuery复选框

我试图使用

复选框添加两个筛选选项。第一个过滤器将根据对象分配给谁来过滤
div
（在本例中为
Nangle
或
Fahon
），第二个过滤器将根据状态（在本例中为
Todo
或
Pending Us
）。下面是到目前为止我的代码


$（文档）.ready（函数（e）{
$（'input[type=“checkbox”]”）。单击（函数（）{
var inputValue=$（this.attr（“值”）；
$（“+inputValue）.toggle（）；
});
});

乔布斯
法洪
保姆
待办事项
等待我们
店名：比萨饼工作名称：机器不工作-
待办事项
信息

店名：城堡工作名称：账户-
待办事项
信息

店名：时间工作名称：营销访问-
待办事项
信息

由于您在描述（Nangle或Fahon）中使用了
或
，这意味着您必须使用
收音机
而不是
复选框
，因此显示/隐藏div将非常简单：

$('input[type="radio"]').change(function() {
    var classes = $('input[type="radio"]:checked').map(function() {
      return $(this).val();
    }).get();

    $('#stats-container>div').hide(); //Hide all
    $("." + classes.join('.')).show(); //Show filtred
});

注意：给你的容器一个标识符，比如我的例子中的
stats container
，可以在每个过滤器之前隐藏所有div


$（文档）.ready（函数（e）{
$（'input[type=“radio”]”）。更改（函数（）{
var classes=$（'input[type=“radio”]：checked'）.map（函数（）{
返回$（this.val（）；
}).get（）；
$（'#stats container>div'）.hide（）；//全部隐藏
$（“+”类.join（“.）.show（）；//show filted
});
});

乔布斯
法洪
保姆
待办事项
等待我们
店名：比萨饼工作名称：机器不工作-
待办事项
信息

店名：城堡工作名称：账户-
待办事项
信息

店名：时间工作名称：营销访问-
待办事项
信息


$（文档）.ready（函数（）{
var$checkbox=$（'input:checkbox'）；//获取所有复选框
var$fields=$（$checkbox.map（function（）{return'.+this.value；}）.get（）.join（'，'）；//获取所有字段
$checkbox.on（'click'，函数（e）{
如果（例如，选中目标）{
//如果您重新检查一个过滤器，我们需要重新评估所有复选框，这样我们就不会重新选中不应该选中的复选框
$fields.show（）；
$checkbox.not（'：checked'）。每个（函数（）{
$fields.filter（'..+this.value）.hide（）；
});
}否则{
//如果取消选中过滤器，只需隐藏相关字段
$fields.filter（'.'+e.target.value）.hide（）；
}
});
});

乔布斯
法洪
保姆
待办事项
等待我们
店名：比萨饼工作名称：机器不工作-
待办事项
信息

店名：城堡工作名称：账户-
待办事项
信息

店名：时间工作名称：营销访问-
待办事项
信息

你的问题是什么？@RamizWachtler它在当前的形式下不起作用，我正在试图找到一种方法让它“不起作用”。请详细说明。假设我们不像你那样熟悉你的问题。因为，我们没有。@Taplar抱歉，我会尽量说得更准确些。因此，它现在的工作方式如果我取消选中一个带有名称的框（Nangle或Fahon），它会工作并隐藏它们，当我想根据状态（Todo或待定Us）过滤信息时，它会再次工作。但是，它不适用于某些场景。例如，如果我取消选中Fahon，然后取消选中Todo，当我再次选中Todo时，Fahon将再次出现，即使Fahon的框未选中。这就是我试图解决的问题。您将遇到的一个问题是“.Pending Us”不是有效的类选择器。这个空间将使“我们”的行为像一个子选择器，而子选择器是无效的。