javascript - 选中复选框时如何刷新页面的一部分？

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

一般来说，这意味着您需要远程访问替代内容。在您服务器上的另一个页面上或在某个地方的数据库中。