Creater Site: Filteration for Onclick On Checkbox to filters the values & Dispaly Dynamically Using Javascript

Explaination:

For Slider Range Price Display:

=>We have to call id's and class for to use it in JS.


<div class="holiday_all_content">
<div class="holiday_left_side_content">
=> <div class="holiday_check_box">Price Range
<div class="filter_text" id="amount_text"></div>
<input type="hidden" id="amount">
<div id="slider-range" class="range_slider" ></div>
</div>

Javascript:

function dosorting(type){
var type=$(this).val();
if(type=='asc'){
$('.hotel_list_box ').tsort({order:'asc',attr:'price'});
}
if(type=='desc'){
$('.hotel_list_box ').tsort({order:'desc',attr:'price'});
}
}

$('#price_sotring').change(function(){
var type=$(this).val();
alert(type);
if(type=='asc'){
$('.hotel_list_box ').tsort({order:'asc',attr:'data-hotel-price'});
}
if(type=='desc'){
$('.hotel_list_box ').tsort({order:'desc',attr:'data-hotel-price'});
}
});

<script type="text/javascript">
    $(function() {
        var $table=$('.holiday_all_content');
        var rows = $table.find('div.hotel_list_box').get();
        var minvalue=null, maxvalue=null;
        
        $(rows).each(function(){
            var price = parseFloat($(this).attr("data-hotel-price"));
            if ((minvalue===null) || (price < minvalue)) { minvalue = price; }
            if ((maxvalue===null) || (price > maxvalue)) { maxvalue = price; }
        });
        $( "#slider-range" ).slider({
            range: true,
            min: minvalue,
            max: maxvalue,
            values: [ minvalue, maxvalue ],
            slide: function( event, ui ) {
                $("#amount_text").html( "$ " + ui.values[ 0 ] + " - $ " + ui.values[ 1 ] );
                $("#amount").val(ui.values[ 0 ]+"-"+ui.values[ 1 ]);
            },
            change: function( event, ui ) {
                filters();
            }   
        });
        $("#amount_text").html( "$ " + minvalue + " - $ " + maxvalue );
        $("#amount").val(minvalue+"-"+maxvalue);
        setHotelthemes('clear');
        //setStarratings('clear');
    });

</script>

var price = $("#amount").val().split("-");
        
        var price_min = price[0];
        var price_max = price[1];

For Themes r City wise Display:

=>  We have Display the Themes or city wise datas we have to dispaly 
from Database call id as any id="all_hotelthemes"
Eg:<div class="force-overflow"><ul id="all_hotelthemes"></ul></div>

=>If we ckick on all it checked all checkboxes and we click on clear it
unchecked all checkboxes.
Eg:<span class="">
<a nohref style='cursor:pointer' onclick="checkedthemes('all');">All</a> | 
<a nohref style='cursor:pointer' onclick="checkedthemes('clear');">Clear</a> 
</span>

Themes Javascript:

$('#hotelthemes_sotring').change(function(){
var type=$(this).val();
if(type=='asc'){
$('.hotel_list_box ').tsort({order:'asc',attr:'price'});
}
if(type=='desc'){
$('.hotel_list_box ').tsort({order:'desc',attr:'hotelthemes'});
}
});

var themes = $("input[name='themes[]']");
var themeslist = Array();
$(themes).each(function(){
if($(this).is(':checked')) {
themeslist.push($(this).val());
}
});

function setHotelthemes(type) {
    var $table=$('.holiday_all_content');
    var rows = $table.find('div.hotel_list_box').get();
    var themes = {}
    var ahtml = "";
    $(rows).each(function(){
        if(typeof themes[$(this).attr("data-hotel-themes")] === "undefined") {
            themes[$(this).attr("data-hotel-themes")] = 1;       
        } else {
            themes[$(this).attr("data-hotel-themes")] = themes[$(this).attr("data-hotel-themes")]+1;
        }
    });
    
    $.each(themes,function(key,value){
        if(type == "all") {
            var checked="checked";
        } else {
            var checked="";
        }
        ahtml = ahtml+'<li class="font_size_12"><span class="themes1"><input name="themes[]" '+checked+' type="checkbox" value="'+key+'" autocomplete="off"  onclick="filters();"></span><span class="themes2">'+key+'</span><span class="themes3">('+value+')</span></li>';
    });
    $("#all_hotelthemes").html(ahtml);
}
function checkedthemes(type) {
    if(type == "all") {
        setHotelthemes("all");
    } else {
        setHotelthemes("clear");
    }
    filters();  
}


For Airlines in Checkbox Display:

<div >Airlines :</div>
<div  >
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="filter_airlines">
</table>
</div>

Airline Javascript:

$('#airline_sotring').change(function(){
var type=$(this).val();
if(type=='asc'){
$('.hotel_list_box ').tsort({order:'asc',attr:'data-airline'});
}
if(type=='desc'){
$('.hotel_list_box ').tsort({order:'desc',attr:'data-airline'});
}
});

var airlines = $("input[name='airlines[]']");
        var airlineslist = Array();
        $(airlines).each(function(){
            if($(this).is(':checked')) {
                airlineslist.push($(this).val());
            }
        });

function setAirlines() {
    var $table=$('.holiday_all_content');
    var rows = $table.find('div.hotel_list_box').get();
    var airlines = {}
    var ahtml = "";
    $(rows).each(function(){
        if(typeof airlines[$(this).attr("data-airline")] === "undefined") {
            airlines[$(this).attr("data-airline")] = $(this).attr("data-airline_price");
            ahtml = ahtml + '<tr><td width="9%" valign="middle" align="left"><div class="padding_top_bottom5"><input name="airlines[]" checked type="checkbox" value="'+$(this).attr("data-airlinecode")+'" autocomplete="off"  onclick="filterResults();"></div></td><td width="45%" valign="middle" align="left"><div class="padding_top_bottom5">'+$(this).attr("data-airline")+'</div></td><td width="46%" valign="middle" align="right"><div class="padding_top_bottom5"><span class="currency_INR"><span class="WebRupee">Rs</span> <span class="newcc_price">'+$(this).attr("data-airline_price")+'</span></span></div></td></tr>'; 
        }
    });
    $("#filter_airlines").html(ahtml);
}


For Search By Hotel Name:

=> <div class="holiday_check_box">
<h3>Search Hotel Name </h3>
<form class="form">
<input type="text" id="search_hotel_name" placeholder="Search here..."   name="search_hotel_name" onkeyup="filters();" />
</form> 
</div>

var hotelname = $("#search_hotel_name").val();




For StarRating:

<div class="starRating">
    <span class="font_size_12 right">
    <a nohref style='cursor:pointer' onclick="checkedstar('all');">All</a> | 
    <a nohref style='cursor:pointer' onclick="checkedstar('clear');">Clear</a> 
    </span>
    <ul id="filter_stars"> </ul>
    </div>

Star Rating Javascript:

$('#starrating_sotring').change(function(){
var type=$(this).val();
if(type=='asc'){
$('.hotel_list_box ').tsort({order:'asc',attr:'data-hotel-rating'});
}
if(type=='desc'){
$('.hotel_list_box ').tsort({order:'desc',attr:'data-hotel-rating'});
}
});
$('#price_sotring').val('desc');    
});

var stars = $("input[name='stars[]']");
        var starslist = Array();
        $(stars).each(function(){
            if($(this).is(':checked')) {
                starslist.push($(this).val());
            }
        });

function setStarratings(type) {
    var $table=$('.content_path');
    var rows = $table.find('div.hotel_list_box').get();
    var stars = {}
    var ahtml = "";
    $(rows).each(function(){
        if(typeof stars[$(this).attr("data-hotel-rating")] === "undefined") {
            stars[$(this).attr("data-hotel-rating")] = 1;        
        } else {
            stars[$(this).attr("data-hotel-rating")] = stars[$(this).attr("data-hotel-rating")]+1;
        }
    });

    for(var i =0;i<=5;i++) {
        if(typeof stars[i] === "undefined") {
            stars[i] = 0;
        }   
    }
    
    $.each(stars,function(key,value){
        if(type == "all") {
            var checked="checked";
        } else {
            var checked="";
        }
        ahtml = ahtml+'<li class="font_size_12"><span class="area1"><input name="stars[]" '+checked+' type="checkbox" value="'+key+'" autocomplete="off"  onclick="filters();"></span><span class="area2"><img src="images/'+key+'star.png"></span><span class="area3">('+value+')</span></li>';
    });
    $("#filter_stars").html(ahtml);
}
function checkedstar(type) {
    if(type == "all") {
        setStarratings("all");
    } else {
        setStarratings("clear");
    }
    filters();  
}


Checkbox For Duration statically gave values:

<div class="holiday_check_box">
<h3>Duration</h3>
<p> <input type="checkbox" name="duration[]" class="styled"  value="NightA" onclick="filters();"/> 1-3 Nights</p>
<p> <input type="checkbox" name="duration[]" class="styled"  value="NightB" onclick="filters();"/> 4-7 Nights</p>
<p> <input type="checkbox" name="duration[]" class="styled"  value="NightC" onclick="filters();"/> +7 Nights</p>
</div>
</div>
In PHP Coding:
=> While Fetching the Data for duration as $duration=$row['duration'];
here we have to write the condition for this duration:
Here i gave as statically given the values NightA,NightB,NightC.
<?php
if($duration < 3)
{
$durations_des="NightA";
}
elseif($duration < 7)
{
$durations_des="NightB";
}
else
{ 
$durations_des="NightC"; 
}
?>

Duration For Statically Values Javascript:

$('#duration_sotring').change(function(){
var type=$(this).val();
if(type=='asc'){
$('.hotel_list_box ').tsort({order:'asc',attr:'data-hotel-duration'});
}
if(type=='desc'){
$('.hotel_list_box ').tsort({order:'desc',attr:'data-hotel-duration'});
}
});

var duration = $("input[name='duration[]']");
        var durationlist = Array();
        $(duration).each(function(){
            if($(this).is(':checked')) {
                durationlist.push($(this).val());
            }
        });


Check Box for Stops here dave the values as single:

<div>Stops:</div>
<div  class="padding5"><input name="stops[]" type="checkbox" value="0" checked onclick="filters();"/> Non Stop</div>
<div  class="padding5"><input name="stops[]" type="checkbox" value="1" checked onclick="filters();"/> 1 Stop</div>
<div  class="padding5"><input name="stops[]" type="checkbox" value="2" checked onclick="filters();"/> 2 Stop</div>
<div  class="padding5"><input name="stops[]" type="checkbox" value="3" checked onclick="filters();"/> 3 Stop</div>

Stops Javascript:

$('#stop_sotring').change(function(){
var type=$(this).val();
if(type=='asc'){
$('.hotel_list_box ').tsort({order:'asc',attr:'data-hotel-stops'});
}
if(type=='desc'){
$('.hotel_list_box ').tsort({order:'desc',attr:'data-hotel-stops'});
}
});

var stops = $("input[name='stops[]']");
        var stopslist = Array();
        $(stops).each(function(){
            if($(this).is(':checked')) {
                stopslist.push($(this).val());
            }
        });


Check Box for Fund or Refund:

<div class="heading6 color_blue1 left_heading_border">Refund /Non - Refund :</div>
<div  class="padding5"><input type="checkbox" value="Refundable" checked name="refund[]" onclick="filters();"/> Refundable</div>
<div  class="padding5"><input type="checkbox" value="Non-Refundable" checked name="refund[]" onclick="filters();"/> Non Refundable</div></div>

Refund r Fund Javascript:

$('#refund_sotring').change(function(){
var type=$(this).val();
if(type=='asc'){
$('.hotel_list_box ').tsort({order:'asc',attr:'data-hotel-refund'});
}
if(type=='desc'){
$('.hotel_list_box ').tsort({order:'desc',attr:'data-hotel-refund'});
}
});

var refund = $("input[name='refund[]']");
        var refundlist = Array();
        $(refund).each(function(){
            if($(this).is(':checked')) {
                refundlist.push($(this).val());
            }
        });

To dispaly the results in Js atlast and for Search Hotel Also:

var hotelname = $("#search_hotel_name").val();
var $table=$('.holiday_all_content');
var rows = $table.find('div.hotel_list_box').get();

    $(rows).each(function(){
        var currentprice = $(this).attr("data-hotel-price");
        if(parseInt(currentprice) >= parseInt(price_min) && parseInt(currentprice) <= parseInt(price_max)) {
            var currentduration = $(this).attr("data-hotel-duration");
            if(jQuery.inArray(currentduration,durationlist) != '-1' || durationlist.length == 0) {
                var currentstops = $(this).attr("data-hotel-stops");
                if(jQuery.inArray(currentstop,stoplist) != '-1' || stoplist.length == 0) {
                    var currentrefund = $(this).attr("data-hotel-refund");
                    if(jQuery.inArray(currentrefund,refundlist) != '-1' || refundlist.length == 0) {
                        var currentstar = $(this).attr("data-hotel-rating");
                        if(jQuery.inArray(currentstar,starslist) != '-1' || starslist.length == 0) {
                            var currentairline = $(this).attr("data-airline");
                            if(jQuery.inArray(currentairline,airlinelist) != '-1' || airlinelist.length == 0) {
                                var currentairline = $(this).attr("data-hotel-themes");
                                if(jQuery.inArray(currentthemes,themeslist) != '-1' || themeslist.length == 0) {
                                    var currenthotelname = $(this).attr("data-hotel-name");
                                    if(hotelname) {
                                        if(currenthotelname.toLowerCase().indexOf(hotelname.toLowerCase()) == "-1") {
                                            $(this).hide();
                                        } else {
                                            $(this).show();
                                        }
                                    } else {
                                        $(this).show();
                                    }   
                                    
                                } else {
                                    $(this).show();
                                }
                            } else {
                                $(this).show();
                            }
                        } else {
                            $(this).show();
                        }
                    } else {
                        $(this).show();
                    }                   
                } else {
                    $(this).hide();
                }
            } else {
                $(this).hide();
            }
        } else {
            $(this).hide();
        }   
    }); 
}

WHOLE JAVASCRIPT:

<script type="text/javascript">
function dosorting(type){
var type=$(this).val();
if(type=='asc'){
$('.hotel_list_box ').tsort({order:'asc',attr:'price'});
}
if(type=='desc'){
$('.hotel_list_box ').tsort({order:'desc',attr:'price'});
}       
}
$(document).ready(function(){
$('#price_sotring').change(function(){
var type=$(this).val();
alert(type);
if(type=='asc'){
$('.hotel_list_box ').tsort({order:'asc',attr:'data-hotel-price'});
}
if(type=='desc'){
$('.hotel_list_box ').tsort({order:'desc',attr:'data-hotel-price'});
}
});
$('#duration_sotring').change(function(){
var type=$(this).val();
if(type=='asc'){
$('.hotel_list_box ').tsort({order:'asc',attr:'data-hotel-duration'});
);
}
if(type=='desc'){
$('.hotel_list_box ').tsort({order:'desc',attr:'data-hotel-duration'});

}

});

$('#refund_sotring').change(function(){ 
var type=$(this).val();
if(type=='asc'){
$('.hotel_list_box ').tsort({order:'asc',attr:'data-hotel-refund'});
}
if(type=='desc'){
$('.hotel_list_box ').tsort({order:'desc',attr:'data-hotel-refund'});
}

});

$('#stop_sotring').change(function(){
var type=$(this).val();
if(type=='asc'){
$('.hotel_list_box ').tsort({order:'asc',attr:'data-hotel-stops'});
}

if(type=='desc'){
$('.hotel_list_box ').tsort({order:'desc',attr:'data-hotel-stops'});
}
});
$('#hotelthemes_sotring').change(function(){
var type=$(this).val();
if(type=='asc'){
$('.hotel_list_box ').tsort({order:'asc',attr:'price'});
}

if(type=='desc'){
$('.hotel_list_box ').tsort({order:'desc',attr:'hotelthemes'});
}

}); 
$('#starrating_sotring').change(function(){

var type=$(this).val();

if(type=='asc'){
$('.hotel_list_box ').tsort({order:'asc',attr:'data-hotel-rating'});
}

if(type=='desc'){
$('.hotel_list_box ').tsort({order:'desc',attr:'data-hotel-rating'});
}

});
$('#price_sotring').val('desc');    
});

</script> 
<script type="text/javascript">
$(function() {
var $table=$('.holiday_all_content');
var rows = $table.find('div.hotel_list_box').get();
var minvalue=null, maxvalue=null;

$(rows).each(function(){
var price = parseFloat($(this).attr("data-hotel-price"));
if ((minvalue===null) || (price < minvalue)) { minvalue = price; }
if ((maxvalue===null) || (price > maxvalue)) { maxvalue = price; }
});
$( "#slider-range" ).slider({
range: true,
min: minvalue,
max: maxvalue,
values: [ minvalue, maxvalue ],
slide: function( event, ui ) {
$("#amount_text").html( "$ " + ui.values[ 0 ] + " - $ " + ui.values[ 1 ] );
$("#amount").val(ui.values[ 0 ]+"-"+ui.values[ 1 ]);
},
change: function( event, ui ) {
filters();
}   
});
$("#amount_text").html( "$ " + minvalue + " - $ " + maxvalue );
$("#amount").val(minvalue+"-"+maxvalue);
setHotelthemes('clear');
//setStarratings('clear');
});

</script> 

Script For Stars in Check box Dynamically ,Themes in Checkbox Dynamically:

<script type="text/javascript">
function filters() {
var price = $("#amount").val().split("-");

var price_min = price[0];
var price_max = price[1];

var duration = $("input[name='duration[]']");
var durationlist = Array();
$(duration).each(function(){
if($(this).is(':checked')) {
durationlist.push($(this).val());
}
});

var stops = $("input[name='stops[]']");
var stopslist = Array();
$(stops).each(function(){
if($(this).is(':checked')) {
stopslist.push($(this).val());
}
});

var airlines = $("input[name='airlines[]']");
var airlineslist = Array();
$(airlines).each(function(){
if($(this).is(':checked')) {
airlineslist.push($(this).val());
}
});

var stars = $("input[name='stars[]']");
var starslist = Array();
$(stars).each(function(){
if($(this).is(':checked')) {
starslist.push($(this).val());
}
});

var refund = $("input[name='refund[]']");
var refundlist = Array();
$(refund).each(function(){
if($(this).is(':checked')) {
refundlist.push($(this).val());
}
});

var themes = $("input[name='themes[]']");
var themeslist = Array();
$(themes).each(function(){
if($(this).is(':checked')) {
themeslist.push($(this).val());
}
});

var hotelname = $("#search_hotel_name").val();

var $table=$('.holiday_all_content');
var rows = $table.find('div.hotel_list_box').get();

$(rows).each(function(){
var currentprice = $(this).attr("data-hotel-price");
if(parseInt(currentprice) >= parseInt(price_min) && parseInt(currentprice) <= parseInt(price_max)) {
var currentduration = $(this).attr("data-hotel-duration");
if(jQuery.inArray(currentduration,durationlist) != '-1' || durationlist.length == 0) {
var currentstops = $(this).attr("data-hotel-stops");
if(jQuery.inArray(currentstop,stoplist) != '-1' || stoplist.length == 0) {
var currentrefund = $(this).attr("data-hotel-refund");
if(jQuery.inArray(currentrefund,refundlist) != '-1' || refundlist.length == 0) {
var currentstar = $(this).attr("data-hotel-rating");
if(jQuery.inArray(currentstar,starslist) != '-1' || starslist.length == 0) {
var currentairline = $(this).attr("data-currentairline");
if(jQuery.inArray(currentairline,airlinelist) != '-1' || airlinelist.length == 0) {
var currentairline = $(this).attr("data-hotel-themes");
if(jQuery.inArray(currentthemes,themeslist) != '-1' || themeslist.length == 0) {
var currenthotelname = $(this).attr("data-hotel-name");
if(hotelname) {
if(currenthotelname.toLowerCase().indexOf(hotelname.toLowerCase()) == "-1") {
$(this).hide();
} else {
$(this).show();
}
} else {
$(this).show();
}   

} else {
$(this).show();
}
} else {
$(this).show();
}
} else {
$(this).show();
}
} else {
$(this).show();
}                   
} else {
$(this).hide();
}
} else {
$(this).hide();
}
} else {
$(this).hide();
}   
}); 
}
function setHotelthemes(type) {
var $table=$('.holiday_all_content');
var rows = $table.find('div.hotel_list_box').get();
var themes = {}
var ahtml = "";
$(rows).each(function(){
if(typeof themes[$(this).attr("data-hotel-themes")] === "undefined") {
themes[$(this).attr("data-hotel-themes")] = 1;       
} else {
themes[$(this).attr("data-hotel-themes")] = themes[$(this).attr("data-hotel-themes")]+1;
}
});

$.each(themes,function(key,value){
if(type == "all") {
var checked="checked";
} else {
var checked="";
}
ahtml = ahtml+'<li class="font_size_12"><span class="themes1"><input name="themes[]" '+checked+' type="checkbox" value="'+key+'" autocomplete="off"  onclick="filters();"></span><span class="themes2">'+key+'</span><span class="themes3">('+value+')</span></li>';
});
$("#all_hotelthemes").html(ahtml);
}
function checkedthemes(type) {
if(type == "all") {
setHotelthemes("all");
} else {
setHotelthemes("clear");
}
filters();  
}

function setAirlines() {
var $table=$('.holiday_all_content');
var rows = $table.find('div.hotel_list_box').get();
var airlines = {}
var ahtml = "";
$(rows).each(function(){
if(typeof airlines[$(this).attr("data-airline")] === "undefined") {
airlines[$(this).attr("data-airline")] = $(this).attr("data-airline_price");
ahtml = ahtml + '<tr><td width="9%" valign="middle" align="left"><div class="padding_top_bottom5"><input name="airlines[]" checked type="checkbox" value="'+$(this).attr("data-airlinecode")+'" autocomplete="off"  onclick="filterResults();"></div></td><td width="45%" valign="middle" align="left"><div class="padding_top_bottom5">'+$(this).attr("data-airline")+'</div></td><td width="46%" valign="middle" align="right"><div class="padding_top_bottom5"><span class="currency_INR"><span class="WebRupee">Rs</span> <span class="newcc_price">'+$(this).attr("data-airline_price")+'</span></span></div></td></tr>'; 
}
});
$("#filter_airlines").html(ahtml);
}

function setStarratings(type) {
var $table=$('.content_path');
var rows = $table.find('div.hotel_list_box').get();
var stars = {}
var ahtml = "";
$(rows).each(function(){
if(typeof stars[$(this).attr("data-hotel-rating")] === "undefined") {
stars[$(this).attr("data-hotel-rating")] = 1;        
} else {
stars[$(this).attr("data-hotel-rating")] = stars[$(this).attr("data-hotel-rating")]+1;
}
});

for(var i =0;i<=5;i++) {
if(typeof stars[i] === "undefined") {
stars[i] = 0;
}   
}

$.each(stars,function(key,value){
if(type == "all") {
var checked="checked";
} else {
var checked="";
}
ahtml = ahtml+'<li class="font_size_12"><span class="area1"><input name="stars[]" '+checked+' type="checkbox" value="'+key+'" autocomplete="off"  onclick="filters();"></span><span class="area2"><img src="images/'+key+'star.png"></span><span class="area3">('+value+')</span></li>';
});
$("#filter_stars").html(ahtml);
}
function checkedstar(type) {
if(type == "all") {
setStarratings("all");
} else {
setStarratings("clear");
}
filters();  
}
</script>


Dispaly the Results in Div Demo:

<div class="holiday_all_content">
<div class="holiday_left_side_content">
<div class="holiday_check_box">Price Range
<div class="filter_text" id="amount_text"></div>
<input type="hidden" id="amount">
<div id="slider-range" class="range_slider" ></div>
</div>
<div class="force-overflow"><ul id="all_hotelthemes"></ul></div>
<span class="">
<a nohref style='cursor:pointer' onclick="checkedthemes('all');">All</a> | 
<a nohref style='cursor:pointer' onclick="checkedthemes('clear');">Clear</a> 
</span>
<div >Airlines :</div>
<div  >
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="filter_airlines">
</table>
</div>
<div class="holiday_check_box">
<h3>Search Hotel Name </h3>
<form class="form">
<input type="text" id="search_hotel_name" placeholder="Search here..."   name="search_hotel_name" onkeyup="filters();" />
</form> 
</div>
<div class="holiday_check_box">
<h3>Duration</h3>
<p> <input type="checkbox" name="duration[]" class="styled"  value="NightA" onclick="filters();"/> 1-3 Nights</p>
<p> <input type="checkbox" name="duration[]" class="styled"  value="NightB" onclick="filters();"/> 4-7 Nights</p>
<p> <input type="checkbox" name="duration[]" class="styled"  value="NightC" onclick="filters();"/> +7 Nights</p>
</div>
</div>
<div class="starRating">
<span class="font_size_12 right">
<a nohref style='cursor:pointer' onclick="checkedstar('all');">All</a> | 
<a nohref style='cursor:pointer' onclick="checkedstar('clear');">Clear</a> 
</span>
<ul id="filter_stars"> </ul>
</div>
<div class="heading6 color_blue1 left_heading_border">Stops:</div>
<div  class="padding5"><input name="stops[]" type="checkbox" value="0" checked onclick="filters();"/> Non Stop</div>
<div  class="padding5"><input name="stops[]" type="checkbox" value="1" checked onclick="filters();"/> 1 Stop</div>
<div  class="padding5"><input name="stops[]" type="checkbox" value="2" checked onclick="filters();"/> 2 Stop</div>
<div  class="padding5"><input name="stops[]" type="checkbox" value="3" checked onclick="filters();"/> 3 Stop</div>
<div class="heading6 color_blue1 left_heading_border">Refund /Non - Refund :</div>
<div  class="padding5"><input type="checkbox" value="Refundable" checked name="refund[]" onclick="filters();"/> Refundable</div>
<div  class="padding5"><input type="checkbox" value="Non-Refundable" checked name="refund[]" onclick="filters();"/> Non Refundable</div>
</div>
<!-----End holiday_left_side_content ---->

Fetch the datas from DATABASE
<!----Right side part Start---->
<div class="holiday_right_side_content hotel_list_box" data-hotel-price="<?php echo $price; ?>"  data-hotel-themes="<?php echo $holidays_types; ?>"  data-hotel-name="<?php echo $Package_Title; ?>" data-hotel-duration="<?php echo $durations_des;?>" data-hotel-rating = "<?php echo $holidays_types; ?>"  data-hotel-stops="<?php echo $stops; ?>" data-hotel-refund="<?php echo $refund; ?>" data-hotel-rating="<?php echo $starrating; ?>" data-airlinecode="<?php echo $airline; ?>"  data-airline_price="<?php echo $airline_price; ?>">

................
................
................
................
</div>
</div><!---- End holiday_all_content---->

Creater Site

Pages

Translate

Wednesday, 15 October 2014

Filteration for Onclick On Checkbox to filters the values & Dispaly Dynamically Using Javascript

Explaination:

For Slider Range Price Display:

For Themes r City wise Display:

For Airlines in Checkbox Display:

For Search By Hotel Name:

For StarRating:

Star Rating Javascript:

Checkbox For Duration statically gave values:

Check Box for Stops here dave the values as single:

Stops Javascript:

Check Box for Fund or Refund:

Refund r Fund Javascript:

WHOLE JAVASCRIPT:

Dispaly the Results in Div Demo:

No comments:

Post a Comment