如何在选中复选框时刷新部分页面

How do I refresh part of a page when a checkbox is selected?

本文关键字：刷新部 分页 复选框      更新时间：2023-09-26

我的网站上有一个简单的复选框列表。

我需要的是:当用户点击一个或两个选择时，页面重新加载只是显示与用户所做选择相关的图像，并隐藏所有其余的。

我不想重载整个页面，只重载body，也就是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-->

任何帮助将不胜感激。谢谢!

是的，您正在寻找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 );
});

一般来说，这意味着您需要远程提供可选内容。无论是在服务器上的另一个页面还是在数据库的某个地方

您需要使用Ajax来完成对新图像的请求，而不是加载图像，您可以使用jquery和Ajax动态地从DB中提取这些图像和数据。

你可以谷歌例子或查看如何做在这里

相关文章：