如何通过复选框选中或取消选中来过滤数据

Question

我有几个复选框，如下所示。当选中一个复选框时，它必须从mysql加载结果，当再次取消选中时，它必须加载结果而不刷新页面。

几乎与http://www.facebook.com/find-friends/browser/

相同

我该怎么办？

 <div class="tags">  <label><input type="checkbox" class="arts" /> Arts </label> <label><input type="checkbox" class="computers" /> Computers </label> <label><input type="checkbox" class="health" /> Health </label> <label><input type="checkbox" class="video-games" /> Video Games </label> </div>

Answer 1

使用JavaScript执行此操作，使用jQuery查看：http://api.jquery.com/jQuery.get/

Answer 2

使用jQuery（如上所述）最容易实现。一般来说，你会经历一系列“找到某事”然后“做某事”的任务。我不是javascript专家，但是我对逻辑的微弱尝试应该让你开始走上正确的道路。

jQuery逻辑看起来像这样：

• “监听”复选框状态的变化，请参阅http://api.jquery.com/change/
• 设置var =您从ajax调用中获得的结果，该调用会提取您想要的信息http://api.jquery.com/jQuery.get/或http://api.jquery.com/jQuery.post/
• 根据复选框的状态附加（或删除）该var，请参阅http://api.jquery.com/append/和http://api.jquery.com/remove/

希望这有帮助。

Answer 3

您需要使用Ajax。

正如人们所说，jQuery允许您轻松完成此操作。

示例：

在JavaScript文件中：

$.ajax({
  url: '/get-data',
  type: 'GET',
  data: { tags: anArrayOfCheckedCheckboxes }, // get the checked checkboxes the way you want
  complete: function(response) {
    // do what do you need with the response (display results for example)
  }
});

在PHP方面（ / get-data URL）：

$tags = $_GET['tags'];
// get the results from the database
return json_encode($results);

Answer 4

你可以获得复选框$（'[name =“hobbies”：checked]'）。val（）的值，对于未选中框，你可以使用$（“input：checkbox：not（：checked）”）