如何使用复选框动态过滤内容？ - jQuery答案

【问题标题】：How to dynamically filter content using checkboxes? - jQuery如何使用复选框动态过滤内容？ - jQuery
【发布时间】：2011-03-30 16:58:35
【问题描述】：

我正在尝试使用复选框和 jquery 动态过滤掉内容。

作为 jquery 的新手，我不确定如何正确执行此操作，所以如果有任何帮助，那就太好了。

我有这个代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" >
        $(document).ready(function(){
            $("#test").change(function()
            {    
                if ($(this).is(":checked"))
                {
                        $("#example").hide();

                }else{
                        $("#example").show();
                }

            });
        });
    </script>
</head>
<body>
    <input type="checkbox" id="test"/>
    <input type="checkbox" id="test2"/>

    <div id="example">Example</div>
    <div id="example2">Example2</div>
</body>
</html>

我正在尝试使这两个复选框动态工作，这意味着我不必像上面那样硬编码 id，这仅适用于第一个复选框。我想要多个复选框，所以想知道如何做到这一点。我是否得到了检查的 id 并以某种方式插入？

任何帮助都会很棒，谢谢。

【问题讨论】：

标签： jquery checkbox filter

【解决方案1】：

我可以给你的复选框一个这样的类：

<input type="checkbox" id="test" class="cb" />
<input type="checkbox" id="test2" class="cb"/>

<div id="example">Example</div>
<div id="example2">Example2</div>

绑定并即时获取 ID 时的用法，如下所示：

$(document).ready(function(){
  $(".cb").change(function() {    
    $("#" + this.id.replace('test', 'example')).toggle(this.checked);
  }).change();  //match the initial show/hide match
});

You can give it a try here，而不是显示/隐藏它使用.toggle(bool)，我们通过转换ID来选择匹配的<div>元素，用example替换test并获取该元素。

【讨论】：