如何在javascript中创建一个过滤器，通过复选框过滤div_Javascript_Html_Checkbox

如何在javascript中创建一个过滤器，通过复选框过滤div

javascript html checkbox

如何在javascript中创建一个过滤器，通过复选框过滤div,javascript,html,checkbox,Javascript,Html,Checkbox,我需要通过复选框进行筛选，这将在一个类别中指定两个或多个选项。我的过滤器在每个类别中过滤一个选项函数更改（）{ 让results=Array.from（document.querySelectorAll（'.result>div'））； //隐藏所有结果 results.forEach（函数（结果）{ result.style.display='none'； }); //仅筛选满足所有要求的结果： Array.from（document.querySelectorAll（'.filter i

我需要通过复选框进行筛选，这将在一个类别中指定两个或多个选项。我的过滤器在每个类别中过滤一个选项

函数更改（）{
让results=Array.from（document.querySelectorAll（'.result>div'））；
//隐藏所有结果
results.forEach（函数（结果）{
result.style.display='none'；
});
//仅筛选满足所有要求的结果：
Array.from（document.querySelectorAll（'.filter input[rel]：checked'），函数（input）{
常量attrib=input.getAttribute（'rel'）；
结果=结果。过滤器（函数（结果）{
返回result.classList.contains（attrib）；
});
});
//显示过滤后的结果：
results.forEach（函数（结果）{
result.style.display='block'；
});
}
改变（）

选择模型
苹果
三星
小米
选择处理器
A9
A8
金鱼鱼
埃克西诺斯
iPhone7
iphone6
三星s7
小米红米音符4x
据我所知（通过阅读评论），您希望有以下行为：

模型或处理器复选框在其过滤器组内为“或”相关
但是手机必须是任何经过检查的型号并且必须有任何经过检查的处理器

此代码应能解决您的问题：

函数更改（）{
var modelCbs=document.queryselectoral（“.models输入[type='checkbox']”）；
var processorCbs=document.querySelectorAll（“.processors input[type='checkbox']”）；
变量过滤器={
型号：GetClassOfCheckedCheckBox（型号CBS），
处理器：GetClassOfCheckedCheckBox（processorCbs）
};
过滤器结果（过滤器）；
}
函数GetClassOfCheckedCheckBox（复选框）{
var类=[]；
如果（复选框和复选框长度>0）{
对于（变量i=0；i0）{
var isHidden=真；
对于（var j=0；j如果（hiddenElems.length试试这个，或者你可以看到前面的演示：

文件
函数更改（）{
让results=Array.from（document.querySelectorAll（'.result>div'）），
modelsChecked=document.querySelectorAll（'.filter-input.models:checked'），
ProcessorChecked=document.querySelectorAll（'.filter input.Processor:checked'）；
//隐藏所有结果
results.forEach（函数（结果）{
result.style.display='none'；
});
//仅筛选满足所有要求的结果：
filterModelsOrProcessors（modelsChecked）；
if（processorsChecked.length！=0）{
filterModelsOrProcessors（ProcessorChecked）；
}
函数过滤器ModelsOrpProcessors（ModelsOrpProcessorChecked）{
结果=数组.from（modelsorProcessorChecked）.reduce（函数（求和，输入）{
常量attrib=input.getAttribute（'rel'）；
返回sum.concat（结果）filter（函数（结果）{
返回result.classList.contains（attrib）；
}));
}, []);
}
//显示过滤后的结果：
results.forEach（函数（结果）{
result.style.display='block'；
});
}
改变（）；
选择模型
苹果
三星
小米
选择处理器
A9
A8
金鱼鱼
埃克西诺斯
iPhone7
iphone6
三星s7
小米红米音符4x
您想合并这些过滤器（例如：apple和snapdragon）还是将它们相乘？（例如：apple或snapdragon）@zeropublix我需要为每组提供更多选择的机会。例如，如果我选择三星和苹果，结果什么都没有显示，但需要同时显示苹果和三星。我能解释一下我的问题吗？@Mr.Chingis如果你选择苹果三星和snapdragon，结果是全部4部手机还是没有（因为三星和苹果没有snapdragon）？@sanatsathyan none。因为choosen产品没有snapdragons处理器。如果我选择苹果三星小米和snapdragon，结果应该只有一部手机小米。因为在choosen手机中，至少有一部手机有snapdragon，所以结果应该是xiaomi@Mr.Chingis这些答案中有没有解决你的问题？然后请把它们标成那样或一个li感谢您的帮助。当div产品内部没有div时，代码正在工作。例如，    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="height=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport">
    <title>Document</title>
    <style>

    </style>
    <!-- <script type="text/javascript" src="http://livejs.com/live.js"></script> -->
    <!-- <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->
    <!-- <script src="test2.js"></script> -->
    <script>
    function change() {
        let results = Array.from(document.querySelectorAll('.result > div')),
            modelsChecked = document.querySelectorAll('.filter input.models:checked'),
            processorsChecked = document.querySelectorAll('.filter input.processors:checked');
        // Hide all results
        results.forEach(function(result) {
            result.style.display = 'none';
        });
        // Filter results to only those that meet ALL requirements:        

        filterModelsOrProcessors(modelsChecked);

        if (processorsChecked.length != 0) {
            filterModelsOrProcessors(processorsChecked);
        }

        function filterModelsOrProcessors(modelsOrProcessorsChecked) {
            results = Array.from(modelsOrProcessorsChecked).reduce(function(sum, input) {
                const attrib = input.getAttribute('rel');
                return sum.concat(results.filter(function(result) {
                    return result.classList.contains(attrib);
                }));
            }, []);
        }
        // Show those filtered results:
        results.forEach(function(result) {
            result.style.display = 'block';
        });
    }
    change();
    </script>
</head>

<body>
    <div class="filter">
        <h1>Select models</h1>
        <div class="checkbox">
            <label>
                <input type="checkbox" rel="apple" class="models" onchange="change()" />Apple</label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" rel="samsung" class="models" onchange="change()" />Samsung</label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" rel="xiaomi" class="models" onchange="change()" />Xiaomi</label>
        </div>
        <h1>Select processors</h1>
        <div class="checkbox">
            <label>
                <input type="checkbox" rel="a9" class="processors" onchange="change()" />A9</label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" rel="a8" class="processors" onchange="change()" />A8</label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" rel="snapdragon" class="processors" onchange="change()" />Snapdragon</label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" rel="exynos" class="processors" onchange="change()" />Exynos</label>
        </div>
    </div>
    <div class="result">
        <div class="apple a9">
            <h1>iPhone 7</h1>
        </div>
        <div class="apple a8">
            <h1>iPhone 6</h1>
        </div>
        <div class="samsung exynos">
            <h1>Samsung s7</h1>
        </div>
        <div class="xiaomi snapdragon">
            <h1>Xiaomi Redmi note 4x</h1>
        </div>
    </div>
</body>

</html>