Question

我正在尝试使用复选框和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，这只适用于第一个复选框。我想要多个复选框，所以想知道如何做到这一点。我是否会检查身份证并以某种方式插入？

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

Answer 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>元素，将test替换为{{1}并获取该元素。

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

1 个答案: