根据复选框标准过滤 divs/table 行 -Javascript/JQuery答案

【问题标题】：Filter divs/table rows based on checkbox criteria -Javascript/JQuery根据复选框标准过滤 divs/table 行 -Javascript/JQuery
【发布时间】：2011-03-31 18:15:02
【问题描述】：

请看：mycellularcenter.com/phones

我想在 javascript/JQuery 中复制此功能，但对该语言不够熟悉，甚至不知道要查找什么。

我所说的功能是指能够选择左栏中的一个或多个项目并显示/隐藏右栏中的内容以满足所选复选框的条件。

我可以根据点击其他列中的文本来显示/隐藏行/div，但不确定如何连接/迭代？通过多项选择。

建议/帮助表示赞赏。

【问题讨论】：

标签： jquery filter show-hide

【解决方案1】：

这是通过 ajax 请求完成的

它抓取表单数据，通过 ajax 请求将其发送到服务器，服务器处理表单数据，在其数据库中执行搜索，然后将 json 或 xml 返回到 javascript，然后为每个动态构建每一行项目

【讨论】：

【解决方案2】：

您当然可以使用 AJAX 来做到这一点。另一种选择是使用 jQuery filter() 函数。

【讨论】：

【解决方案3】：

在服务器端做它肯定更容易，但这不是必须的，特别是如果你不会使用非常复杂的过滤器

看看这个 jQuery 插件

http://plugins.jquery.com/project/uiTableFilter

【讨论】：

【解决方案4】：

看起来您需要做的是查看复选框何时更改，然后将内容（通过 ajax，使用 xml/html/json）重新加载到 div 中。 http://jsfiddle.net/mazzzzz/ABk4R/6/ 是我会使用的 javascript，和 php 会是这样的：

脚本.php

<?php
$firstcheckboxChecked = $_POST['1'];
if ($firstcheckboxChecked)
    echo 'crap because first checkbox was checked';
?>

每个复选框都发送到 $_POST 变量中的 php，因此复选框 <input type="checkbox" value="te" /> 将通过 $_POST['te'] 访问（如果复选框被选中，则为 true，否则为 false）。然后将这个页面生成的html放入container div中（替换掉那个div中的旧内容）。

【讨论】：

【解决方案5】：

我最近做了类似的事情，并且能够将它重构为我认为你想要的。这里解释的太详细了，查看代码中的cmets，还有这个例子：

http://jsbin.com/adaru3/edit

【讨论】：