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


How can i filter data by checkbox check or uncheck

我有几个复选框,如下所示。 当选中一个复选框时,它必须从 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>

你用 JavaScript 来做这件事,用 jQuery 看看这里: http://api.jquery.com/jQuery.get/

这使用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/

希望这有帮助。

你需要使用 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);

您可以获取选中复选框 $('[name="hobbies":checked]').val() 的值,对于未选中的复选框,您可以使用 $("input:checkbox:not(:checked)")