VANHIEP.NET - Làm web giá rẻ - Thiết Kế Website - Thiết Kế Ứng Dụng Mobile
Tạo bộ lọc sản phẩm với checkbox + jquery

Tạo bộ lọc sản phẩm với checkbox + jquery

Tạo bộ lọc sản phẩm với checkbox + jquery

Demo

Tạo bộ lọc sản phẩm với checkbox + jquery 

var category = [];
var locale = [];
var size = [];
var color = [];
var number = 24;
$(document).ready(function(){
	$(".item_filter input.category").click(function(){
		checkbox_click('category',category=[])
	});
	$(".item_filter input.locale").click(function(){
		checkbox_click('locale',locale=[])
	});
	$(".item_filter input.size").click(function(){
		checkbox_click('size',size=[])
	});
	$(".item_filter input.color").click(function(){
		checkbox_click('color',color=[])
	});
	
	$('#search_pro').keyup(function(e){
    if(e.keyCode == 13)
    {
       fillter(1,number);
    }
    $(".btn_search").click(function(){
    	fillter(1,number);
    })
});
});
//=====================
function checkbox_click(class_input,arr){	
	$('input.'+class_input+':checkbox:checked').each(function () {
	    arr.push($(this).val());
	});
	fillter(1,number);
}
function tieptheo(page){
	fillter(page,number);
}
//=====================

//=====================
function fillter(page,number){
	let name = $("#search_pro").val();
	$.ajax({
    type: "POST",
    url: $("#base_url").val() + "search/boloc",
    data:{name:name,category:category,locale:locale,size:size,color:color,page:page,number:number},
    success: function(ketqua) {
    	$("#result_fill").html(ketqua);
    	}
    });
}

Các bước làm 

  • Viết 1 hàm filter gọi ajax đến hàm php xử lý lọc dữ liệu
  • Viết hàm checkbox_click để lấy mảng dữ liệu khi người dùng chọn input
  • Viết hàm document ready khi load trang xong, người dùng click vào thẻ input thì lọc hết các thẻ input được checked để lấy thông sô lọc