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

Question

I have a few checkbox like below. and when one checkbox checked it must load result from mysql and when unchecked again it must load result without page refresh.

Almost it is same with http://www.facebook.com/find-friends/browser/

How can i do?

 <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

This is most easily accomplished using jQuery (as stated above). In general, you'll go through a series of 'find something' then 'do something' tasks. I'm no javascript expert, but my feeble attempt at the logic should get you started on the right path.

The jQuery logic will look something like this:

• "listen" for a change in the status of the checkbox see http://api.jquery.com/change/
• set a var = the result that you get from an ajax call which pulls the information you want see http://api.jquery.com/jQuery.get/ or http://api.jquery.com/jQuery.post/
• append (or remove) that var depending on the state of the checkbox see http://api.jquery.com/append/ and http://api.jquery.com/remove/

Hope this helps.

Answer 3

You need to use Ajax.

As people suggested, jQuery allows you to do this easily.

Example:

In a JavaScript file:

$.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)
  }
});

On PHP's side ( /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）”）