如何通過復選框選中或取消選中過濾數據

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/
• 根據復選框的狀態追加（或刪除）該變量，請參見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）”）