如何使用复选框动态地过滤内容？ - jQuery [英] How to dynamically filter content using checkboxes? - jQuery
问题描述
对于jquery而言，我并不确定如何正确执行此操作，因此如果任何可以帮助，这将是伟大的。
我有这个代码：
< script type =text / javascriptsrc =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 =checkboxid =test/>
< input type =checkboxid =test2/>
< div id =example>示例< / div>
< div id =example2> Example2< / div>
< / body>
< / html>
我正在努力使这两个复选框动态工作，这意味着我不必硬编码像上面的id，这只适用于第一个复选框。我想有多个复选框，所以想知道如何做到这一点。我可以检查一下id，然后插入吗？
任何帮助都会很好，谢谢。
我可以给你的复选框这样的类：
$ p $ < input type =复选框id =testclass =cb/>
< input type =checkboxid =test2class =cb/>
< div id =example>示例< / div>
< div id =example2> Example2< / div>
$ b
使用时绑定并获取ID，如下所示：
$（。cb）。change（function（）{
$（＃+ this.id.replace（' （）;
}）。change（）; // match the initial show / hide match
}）;
你可以在这里试试看，而不是显示/隐藏这个用法 .toggle（bool） ，我们通过转换ID选择匹配的< div> 元素，替换测试与示例并获取该元素。
I am trying to dynamically filter out content using checkboxes and jquery.
Being new to jquery, I'm not sure on how to do this properly, so if any can help that would be great.
I have got this code:
<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>
I am trying to make it so that both checkboxes work dynamically, meaning that I don't have to hard code the id in like above, which only works for the first checkbox. I want to have multiple checkboxes so was wondering how to do this. Do I get the id on check and insert somehow?
Any help would be great, thanks.
I could give your checkboxes a class like this:
<input type="checkbox" id="test" class="cb" />
<input type="checkbox" id="test2" class="cb"/>
<div id="example">Example</div>
<div id="example2">Example2</div>
The use that when binding and get the ID on the fly, like this:
$(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, instead of show/hide this uses .toggle(bool), and we're selecting the matching <div> element by transforming the ID, replacing test with example and fetching that element.
这篇关于如何使用复选框动态地过滤内容？ - jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
