當選中複選框時，如何刷新頁面的一部分？

Question

我在我的網站上有一個簡單的複選框列表。

我需要的是：當用戶點擊一個或兩個選擇時，頁面將重新加載，只是顯示用戶所做選擇的相關圖像，並隱藏其餘所有內容。

我不希望整個頁面重新加載，只是我的div的身體。

爲了使我的觀點清楚，這裏有一個例子： http://www.entel.pe/personas/catalogo-equipos/

在左側的豎線，點擊「MARCAS」，然後如果你點擊一個或兩個選項清單上，您將只看到一個網站加載區塊，並隱藏除了與您的選擇相關的所有圖片。

<!-- language: lang-html --> 
<div class="brands_products"><!--brands_products--> 
    <h2>Marcas</h2> 
     <div class="brands-name"> 
      <ul class="nav nav-pills nav-stacked"> 
       <div class="clearfix"> 
        <input id="ffc-telefonia-movil-19" name="ffc-tipo-equipo[]" class="checkbox" value="19" type="checkbox" > 
        <span class="pull-right">(50)</span> 
        <label class="margen-left-5 flotar-izq padding-top-2">Accer</label> 
       </div> 
       <div class="clearfix"> 
        <input id="ffc-telefonia-movil-19" name="ffc-tipo-equipo[]" class="checkbox" value="19" type="checkbox"> 
        <span class="pull-right">(10)</span> 
        <label class="margen-left-5 flotar-izq padding-top-2">Apple</label> 
       </div> 
       <div class="clearfix"> 
        <input id="ffc-telefonia-movil-19" name="ffc-tipo-equipo[]" class="checkbox" value="19" type="checkbox"> 
        <span class="pull-right">(8)</span> 
        <label class="margen-left-5 flotar-izq padding-top-2">HP</label> 
       </div> 
       <div class="clearfix"> 
        <input id="ffc-telefonia-movil-19" name="ffc-tipo-equipo[]" class="checkbox" value="19" type="checkbox"> 
        <span class="pull-right">(27)</span> 
        <label class="margen-left-5 flotar-izq padding-top-2">Lenovo</label> 
       </div> 
       <div class="clearfix"> 
        <input id="ffc-telefonia-movil-19" name="ffc-tipo-equipo[]" class="checkbox" value="19" type="checkbox"> 
        <span class="pull-right">(30)</span> 
        <label class="margen-left-5 flotar-izq padding-top-2">Sansung</label> 
       </div> 
       <div class="clearfix"> 
        <input id="ffc-telefonia-movil-19" name="ffc-tipo-equipo[]" class="checkbox" value="50" type="checkbox"> 
        <span class="pull-right">(19)</span> 
        <label class="margen-left-5 flotar-izq padding-top-2">Sony</label> 
       </div> 
      </ul> 
     </div> 
</div><!--/brands_products--> 

任何幫助將不勝感激。謝謝！

Answer 1

是的，你正在尋找AJAX。基本的想法是，你從你的複選框中觀看一個事件。 （示例假設您使用的是jQuery。）

$('input[type=checkbox]').change(function() { //when checked or unchecked... }); 

根據更改，您可以將新內容調用到頁面上並替換現有內容。 （http://api.jquery.com/jquery.ajax/）

$.ajax({ 
    url: "newContent.html", 
    context: document.body 
}).done(function(html) { 
    $('#main_section').html(html); 
}); 

一般來說，這意味着你需要有遠程可用的替代內容。可以在服務器上的另一個頁面上或某個數據庫中。

Answer 2

您需要使用Ajax來執行新圖像的請求，而不是加載圖像，您可以使用jquery和ajax動態地從數據庫中提取這些圖像和數據。

你可以谷歌的例子或檢查如何做到這一點。