Question

我想通过jquery使用我的产品页面的复选框..这样客户就可以通过此复选框轻松找到所需的产品。请帮助我，因为我处于jquery的早期阶段。提前致谢

<!DOCTYPE HTML>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 " lang="sv"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8 ie7" lang="sv"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9 ie8" lang="sv"><![endif]-->
<!--[if gt IE 8]> <html class="no-js ie9" lang="sv"><![endif]-->
<html lang="sv">
    <script src="assets/js/jquery-1.11.0.min.js"></script>
    <body id="rims" class="category category-14 category-falgar hide-right-column lang_sv">
        <div id="page">
            <div class="columns-container">
                <div id="columns" class="container">
                    <!-- Breadcrumb -->
                    <div class="breadcrumb clearfix">
                        <a class="home" href="index.php" title="&Aring;terg&aring; till Startsidan"><i class="icon-home"></i></a>
            <span class="navigation-pipe" >&gt;</span>
            <span class="navigation_page">F&auml;lgar</span>
            </div>
<!-- /Breadcrumb -->
<div id="slider_row" class="row">
    <div id="top_column" class="center_column col-xs-12 col-sm-12"></div>
</div>
<div class="row">
    <div id="left_column" class="column col-xs-12 col-sm-3">
<!-- Block layered navigation module -->
  <div id="layered_block_left" class="block">
    <p class="title_block">S&ouml;k F&auml;lgar</p>
    <div class="block_content
    <form action="#" id="layered_form">
      <div>
        <div class="layered_filter">
          <div class="layered_subtitle_heading">
                <span class="layered_subtitle">Storlek</span>
              </div>
          <ul id="" class="col-lg-12 ">
        <?php include 'php/config.php';
            $sql =mysql_query("select * from size");
            while($row=mysql_fetch_array($sql)){
            ?>
        <li class="nomargin hiddable col-lg-6">
          <input type="radio" class="radio" name="size" id="size<?php echo $row['size']?>" value="<?php echo $row['size']?>" />
            <label for="layered_id_attribute_group_86">
              <a href="#"><?php echo $row['size']?></a>
            </label>
        </li>

        <?php
          }
        ?>
           </ul>
          </div>
            <div class="layered_filter">
                <div class="layered_subtitle_heading">
                            <span class="layered_subtitle">Bredd</span>
                            <!--<span class="layered_close">
                                <a href="#" rel="ul_layered_id_attribute_group_4"></a>
                            </span>-->
                </div>
                <ul id="ul_layered_id_attribute_group_4" class="col-lg-12 layered_filter_ul">
                    <?php include 'php/config.php';
                                       $sql =mysql_query("select * from width");
                                      while($row=mysql_fetch_array($sql)){
                                    ?>
                    <li class="nomargin hiddable col-lg-6">
                        <input type="radio" class="radio" name="layered_id_attribute_group_33" id="layered_id_attribute_group_33" value="33_4" />
                        <label for="layered_id_attribute_group_33">
                            <a href="#"><?php echo $row['width']?></a>
                        </label>
                    </li>
                    <?php
                                        }
                                     ?>
                   </ul>
            </div>
            <div class="layered_filter">
                <div class="layered_subtitle_heading">
                            <span class="layered_subtitle">Bultm&ouml;nster</span>
                            <!--<span class="layered_close">
                                <a href="#" rel="ul_layered_id_attribute_group_2"></a>
                            </span>-->
                </div>
                <ul id="ul_layered_id_attribute_group_2" class="col-lg-12 layered_filter_ul">
                    <?php include 'php/config.php';
                        $sql =mysql_query("select * from bolt");
                        while($row=mysql_fetch_array($sql)){
                    ?>
                    <li class="nomargin hiddable col-lg-6">
                        <input type="radio" class="radio" name="layered_id_attribute_group_8" id="layered_id_attribute_group_8" value="8_2" />
                        <label for="layered_id_attribute_group_8">
                            <a href="#"><?php echo $row['bolt']?></a>
                        </label>
                    </li>
                    <?php
                        }
                    ?>
                    </ul>
            </div>
            <div class="layered_filter">
                <div class="layered_subtitle_heading">
                            <span class="layered_subtitle">ET</span>
                            <!--<span class="layered_close">
                                <a href="#" rel="ul_layered_id_attribute_group_6"></a>
                            </span>-->
                </div>
                <ul id="ul_layered_id_attribute_group_6" class="col-lg-12 layered_filter_ul">
                    <?php include 'php/config.php';
        $sql =mysql_query("select * from offset");
        while($row=mysql_fetch_array($sql)){
     ?>
                    <li class="nomargin hiddable col-lg-6">
                        <input type="radio" class="radio" name="layered_id_attribute_group_205" id="layered_id_attribute_group_205" value="205_6" />
                        <label for="layered_id_attribute_group_205">
                            <a href="#"><?php echo $row['offset']?></a>
                        </label>
                    </li>
                    <?php
                                      }
                    ?>
                    </ul>
            </div>
      </div>
        <input type="hidden" name="id_category_layered" value="14" />
        </form>
  </div>
  <div id="layered_ajax_loader" style="display: none;">
    <p>
        <img src="images/loader.gif" alt="" />
        <br />Laddar...
    </p>
  </div>
</div>
<!-- /Block layered navigation module -->
</div>
<!-- Left Panel end -->
<div id="center_column" class="center_column col-xs-9 col-sm-9" >
    <h1 class="page-heading product-listing"><span class="cat-name">F&auml;lgar&nbsp;</span>
</h1>
    <div class="content_sortPagiBar clearfix">
        <div class="sortPagiBar clearfix">
<!-- /Sort products -->
<!-- nbr product/page -->
<!-- /nbr product/page -->
        </div>
        <div class="top-pagination-content clearfix">
            <!-- Pagination -->
            <div id="pagination" class="pagination clearfix">
                <form class="showall" action="" method="get">
                    <div>

                        <input type="hidden" name="id_lang" value="9" />
                        <input type="hidden" name="id_category" value="14" />
                        <input type="hidden" name="controller" value="category" />
                        <input name="n" id="nb_item" class="hidden" value="1098" />
                    </div>
                </form>

            </div>
            <?php
              $sql =mysql_query("select * from items ");
              $num_rows = mysql_num_rows($sql);
            ?>
            <div class="product-count">
                Visar <?php echo $num_rows; ?> artiklar
            </div>
    <!-- /Pagination -->
        </div>
    </div>
    <!-- Products list -->

    <!--ul-->
    <div class="product_list grid row">
        <?php
                while($row=mysql_fetch_array($sql)){
            ?>
        <!--li-->
        <div class="ajax_block_product col-xs-6 col-sm-6 col-md-4 first-in-line first-item-of-tablet-line first-item-of-mobile-line">

     <div class="layered" itemscope itemtype="http://schema.org/Product" >
        <div class="layered_filter" >

        <div class="product-image-container" >
            <a class="product_img_link"href="#" title="<?php echo $row['model_name']?> " itemprop="url">
            <img class="replace-2x img-responsive" src="admin/itempics/<?php echo $row['itemno']?>.jpg" alt="<?php echo $row['model_name']?> " title="<?php echo $row['cname']?>  "  width="250" height="250" itemprop="image" />
            </a>
            <div class="content_price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">

                <meta itemprop="priceCurrency" content="SEK" />
            </div>
        </div>
        </div>
        <div class="layered_filter">
            <h5 itemprop="name">
                <a class="product-name" href="#" title="<?php echo $row['model_name']?> " itemprop="url" >
                <b><?php echo $row['model_name'], $row['cname'], $row['itemno'], $row['size'], $row['width'], $row['offset'], $row['colour']?></b>
                </a>
            </h5>
            <p class="product-desc" itemprop="description">
            <?php echo $row['model_name']?>
            </p>
            <div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="content_price">
                <span itemprop="price" class="price product-price">
                <?php echo $row['price']?> ,00 kr
                </span>
                <meta itemprop="priceCurrency" content="SEK" />
            </div>
            <div style="margin-bottom:10px;" class="button-container">
                <a class="button ajax_add_to_cart_button btn btn-default" href="index.php?con=8" id="rims_add_cart<?php echo $row['items_id']; ?>" rel="nofollow" title="L&auml;gg till i varukorgen" data-id-product="1338" data-value="<?php echo $row['items_id']; ?>" >
                <span>L&auml;gg till i varukorgen</span>
                </a>
                <a style="margin-top:5px;" itemprop="url" class="button lnk_view btn btn-default" href="index.php?con=11 & itemno=<?php echo $row['items_id']; ?>" title="View">
                    <span>Mer</span>
                </a>
            </div>
            <div class="product-flags">

            </div>
            <script>

            $("#rims_add_cart<?php echo $row['items_id']; ?>").click(function() {
            var addcart = $(this).data('value');
            $.ajax({
            type: "GET",
            url: "session_cart_items.php",
            data: {addsessioncart : addcart},
            //cache: false,
          });
            //alert($(this).data('value'));
        });
        </script>

            </div>
        <div class="functional-buttons clearfix">

        </div>
     </div><!-- .product-container> -->
        </div><!--li end-->
        <?php
            }
            ?>
    </div><!--ul end-->








</div>
                </div>
            </div>
        </div>

</div><!-- #center_column -->
                </div><!-- .row -->
            </div><!-- #columns -->
        </div><!-- .columns-container -->
        <!-- Footer -->
        </div><!-- #page -->
        <script type="text/javascript" src="assets/js/jquery.ui.core.min.js"></script>
        <script type="text/javascript" src="assets/js/jquery.ui.mouse.min.js"></script>
        <script type="text/javascript" src="assets/js/jquery.ui.slider.min.js"></script>
        <script type="text/javascript" src="assets/js/jquery.ui.widget.min.js"></script>
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script>
           $('input[type="checkbox"]').click(function() {
            if ($('input[type="checkbox"]:checked').length > 0) {
                $('.layered >div').hide();
                $('input[type="checkbox"]:checked').each(function() {
                    $('.layered >div[data-category=' + this.id + ']').show();
                    });
                } else {
                    $('.layered >div').show();
                    }
                    });
        </script>

        </div>
    </body>
</html>

这是我上面的代码..我使用php作为后端。

复选框选择JavaScript以显示后端php所需的结果

0 个答案: