I want to use checkbox for my product page by jquery.. So that customer can easily find their required product with this checkbox . Please do help me as i am in very early stage of jquery. Thanks in advance
<!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="Återgå till Startsidan"><i class="icon-home"></i></a>
<span class="navigation-pipe" >></span>
<span class="navigation_page">Fä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ök Fä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ö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älgar </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ägg till i varukorgen" data-id-product="1338" data-value="<?php echo $row['items_id']; ?>" >
<span>Lä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>
This is my code for the above.. I am using php as backend .
