Javascript 如何通过隐藏/显示具有动态属性的div进行过滤？

假设我有复选框x、y、z和

元素，它们具有相应的

id

属性

我把产品分成x、y、z组，这些组有类。但是，

clearfix

类适用于不同位置的所有产品（因为我在产品中循环），所以我应该识别id和其他东西的差异

如果选中复选框，则应显示相关的div（如果

x

，则显示

）。如果没有，就不应该显示它们。如果选中了x和y，则显示x、y和隐藏z

因此，它应该与多个应用程序配合使用。以下是导致问题的clearfix的div和样式：

.clearfix:在{
明确：两者皆有；
}
.clearfix{
缩放：1；
显示：块；
}
.clearfix:之后{
显示：块；
内容：“.”；
明确：两者皆有；
字号：0；
线高：0；
身高：0；
溢出：隐藏；
}

---

为什么不将以下属性添加到您的复选框数据target='div#'

然后为divs ID指定相同的值

然后使用js:

$(document).on('click', '.checkboxs', function() {
var t = $(this).attr('data-target');
if(t != undefined) {
    //check if its already shown, if so hide!
    if($(this).attr('data-isshown')) {
        $("#"+t).hide();
        $(this).removeAttr('data-isshown')
    } else {
        $("#"+t).show();
        $(this).attr("data-isshown", true);
    }
  } 
});

如果我误解了您的问题，请原谅，但您可以使用通用兄弟组合器单独使用CSS来完成此任务：


这是一个盒子。
这是b盒。

.box{
显示：无；
}
.box_a：选中~#a，
.box_b：选中~#b{
显示：块；
}

演示：

如果无法控制id值，则可以基于类型的第n个连接：

。选中：第n个类型（1）：选中~。框：第n个类型（1），
.勾选：第n个类型（2）：勾选~.框：第n个类型（2）{
显示：块；
}

演示：

如果需要在未选中任何复选框时显示所有内容，则可以使用下一个同级选择器和常规同级选择器：

.check:not（：checked）+.check:not（：checked）~.box{
显示：块；
}

这将显示在至少两个未选中的
元素之后的所有
.box
元素

演示：
最后我找到了答案，我遍历了所有复选框和所有div

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

        $('input[type="checkbox"]').click(function(){
            var numberOfChecked = $('input:checkbox:checked').length;
            $(".clearfix").each(function(){
                var clear=$(this);
             $('input[type="checkbox"]').each(function(){
                 var variable=$(this);
                var flag=$(this).prop('checked');
                var id=$(this).val();

                if(flag)
                 {

                    if(clear.attr("value")==variable.val())
                   {
                        var id=clear.attr("value");
                        var x=document.getElementById(id);
                        x.style.display="block";
                        clear.css('display','block');

                    }

                        }
                else  if(clear.attr("value")==variable.val())
                {   var id=clear.attr("value");
                    var x=document.getElementById(id);
                    x.style.display="none";
                    clear.css('display','none');

                }
                if(!numberOfChecked)
                {
                    var id=clear.attr("value");
                    var x=document.getElementById(id);
                    x.style.display="block";
                    clear.css('display','block');
                    }
             });    //clear
        });//all checkboxes
    }); //click  
         });//ready


$（文档）.ready（函数（）{
$（'input[type=“checkbox”]”）。单击（函数（）{
var numberOfChecked=$（'input:checkbox:checked'）。长度；
$（“.clearfix”）.each（函数（）{
var clear=$（此值）；
$（'input[type=“checkbox”]”）。每个（函数（）{
var变量=$（此变量）；
var flag=$（this.prop（'checked'）；
var id=$（this.val（）；
国际单项体育联合会（旗）
{
if（clear.attr（“value”）==variable.val（））
{
var id=clear.attr（“值”）；
var x=document.getElementById（id）；
x、 style.display=“block”；
css（'display'，'block'）；
}
}
else if（clear.attr（“value”）==variable.val（））
{var id=clear.attr（“值”）；
var x=document.getElementById（id）；
x、 style.display=“无”；
css（'display'，'none'）；
}
如果（！numberOfChecked）
{
var id=clear.attr（“值”）；
var x=document.getElementById（id）；
x、 style.display=“block”；
css（'display'，'block'）；
}
})；//清楚
})；//所有复选框
})；//单击
});//准备好的
如果只发布呈现的html（不使用php），修复js会容易得多。A如果你愿意的话，我会很高兴的consider@Nickparsa你能分享你生成的HTML吗？您在这里提供的代码不包括任何复选框，也不包括它们与DOM中
元素之间的关系。我解决了我的问题，您可以看到我的答案这是什么意思？要我显示页面源代码吗？@Nickparsa当浏览器加载此页面时，所有PHP都已处理，只留下HTML标记/属性。我想看看你剩下的HTML。我想我们可以想出一个比你在这里发布的答案更好的方法，页面应该包含所有项目，如果用户尝试使用复选框，就会显示它们all@Nickparsa我不知道我是否理解。我有产品，例如x、y、z，它们有类。是吗？但是clearfix类适用于所有产品，所以我应该认识到id和其他东西的区别，所以我不能简单地使用类名，你能详细说明一下吗？有趣的是，它不适用于clear fix，它只适用于标题