用于在jquery中搜索的复选框 [英] Checkbox for search in jquery
本文介绍了用于在jquery中搜索的复选框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在下面的项目中我有复选框然后它因为真的显示你有些产品有os android。
in the following project I have checkbox then it becames true show you some products have os android.
thank you
<script type="text/javascript">
// start user setings
var maxColumn = 2; // max cells in a row
var range = 3; // range of num links to show
// end user setings
var rowsPerPage = 0;
var currentpage = 0;
var maxPrice = 0;
var minPrice = 0;
var sortBy = '';
var sortOrder = 0;
// the products information array
var products = [
{"id":"1","category":"Apple","price":2860,"image":"images/Apple-iPhone-4.gif","title":"Apple iPhone 4","os":"android"}
, { "id": "2", "category": "BlackBerry", "price": 450, "image": "images/BlackBerry-9780-Bold.gif", "title": "BlackBerry 9780 Bold", "os": "android" }
, { "id": "12", "category": "BlackBerry", "price": 520, "image": "images/BlackBerry-Torch-9800.gif", "title": "BlackBerry Torch 9800", "os": "android" }
, { "id": "26", "category": "HTC", "price": 1850, "image": "images/HTC-Desire-S.gif", "title": "HTC Desire S", "os": "android" }
,{"id":"50","category":"HTC","price":600,"image":"images/HTC-HD7.gif","title":"HTC HD7"}
,{"id":"21","category":"HTC","price":2400,"image":"images/HTC-Incredible-S.gif","title":"HTC Incredible S"}
,{"id":"11","category":"HTC","price":2500,"image":"images/HTC-Sensation.gif","title":"HTC Sensation"}
,{"id":"3","category":"HTC","price":100,"image":"images/HTC-Wildfire.gif","title":"HTC Wildfire"}
,{"id":"6","category":"Motorola","price":2460,"image":"images/Motorola-Atrix-4G.gif","title":"Motorola Atrix 4G"}
,{"id":"14","category":"Motorola","price":100,"image":"images/Motorola-DEFY.gif","title":"Motorola DEFY"}
,{"id":"15","category":"Nokia","price":1200,"image":"images/Nokia-C7.gif","title":"Nokia C7"}
,{"id":"60","category":"Nokia","price":1700,"image":"images/Nokia-N8.gif","title":"Nokia N8"}
,{"id":"70","category":"Nokia","price":2000,"image":"images/Nokia-X6.gif","title":"Nokia X6"}
,{"id":"45","category":"Samsung","price":1800,"image":"images/Samsung-I9000-Galaxy-S.gif","title":"Samsung I9000 Galaxy S"}
,{"id":"23","category":"Samsung","price":2900,"image":"images/samsung-I9100-galaxy-S2.gif","title":"samsung I9100 galaxy S2"}
,{"id":"17","category":"Samsung","price":1300,"image":"images/Samsung-S5830-Galaxy-Ace.gif","title":"Samsung S5830 Galaxy Ace"}
,{"id":"99","category":"Sony-Ericsson","price":1400,"image":"images/Sony-Ericsson-XPERIA-X10.gif","title":"Sony Ericsson XPERIA X10"}
];
function setProducts(){
sortBy = sortBy?sortBy:$('#product_sort').val() ;
rowsPerPage = rowsPerPage?rowsPerPage:$('.product_pages button:first').html() ;
desc = sortOrder>0?true:false;
currentpage = currentpage>0?currentpage:1; // if current page is less than first page...
var totalLoop = rowsPerPage;
var loop = 0;
var countCellData = 0;
var offset = 0;
// empty content
$('#product_show').html(' ');
// set select boxes to there selected as the var value
$('#product_order').val(sortOrder);
$('#product_sort').val(sortBy);
var filterdProducts = []; // displayed products array
var key = 0;
// if needed price range filter
if(!minPrice && !maxPrice){
filterdProducts = products;
} else{
$.each(products, function(i, object) {
var curentPrice = parseFloat(object.price);
var priceMinOk = true;
var priceMaxOk = true;
// filter results match the price range
if(maxPrice || minPrice){
if(maxPrice && maxPrice<curentPrice){
priceMaxOk = false;
}
if(minPrice && minPrice>curentPrice){
priceMinOk = false;
}
}
// loop over list and get only related to new array
if( priceMinOk && priceMaxOk ){
filterdProducts[key] = object;
key++;
}
});
}
// get the amount of results
var totalResults = filterdProducts.length;
if(totalResults>0){
// if there are results - set selected order
filterdProducts.sort(function(a, b){
var a1= a[sortBy], b1= b[sortBy];
if(a1== b1){ return 0;}
if(desc){
return (a1 > b1) ? -1 : (a1 < b1) ? 1 : 0;
}else{
return a1> b1? 1: -1;
}
});
}
// checkbox true
// show the amount of results
$('.product_results').html(totalResults);
/****** start build pagination links ******/
var totalpages = Math.ceil(totalResults/ rowsPerPage) ; // calculate the total pages
if(totalpages>1){
// fix displayed page number if its biger then exist
if (currentpage > totalpages) {
// set current page to last page
currentpage = totalpages;
}
// set the offset of the list, based on current page
offset = (currentpage - 1) * rowsPerPage;
var pagination = '';
var lastPage = 0;
// set the min page of the list, based on the range
var minPage = parseFloat(currentpage) - parseFloat(range);
minPage = minPage>0?minPage:1;
// if not page 1, don't show back links
if (currentpage > 1) {
// get previous page num
pagination += '<button type="button" name="'+(currentpage - 1)+'" class="product_button" title="◄Previous" >◄Previous<\/button>';
// show page 1 only if the min page isn`t page 1 (prevent page 1 to show twice)
if(minPage>1){
pagination += '<button type="button" name="1" class="product_button" title="1" >1<\/button>';
}
}
// loop to show links to range of pages around current page
for (var x = minPage; x <= (currentpage + range) ; x++) {
// validate page number
if (x <= totalpages) {
lastPage = x;
// if this is current page set its value to 0 (prevent click) and set class as selected
if (x == currentpage) {
pagination += '<button type="button" name="0" class="product_button_selected" title="'+x+'" >'+x+'<\/button>';
} else {
pagination += '<button type="button" name="'+x+'" class="product_button" title="'+x+'" >'+x+'<\/button>';
}
}
}
// if not on last page, show forward and last page links
if (currentpage != totalpages) {
// get next page
var nextPage = parseFloat(currentpage) + 1;
if(lastPage<totalpages){
// show page last page only if the min page isn`t last page (prevent page 1 to show twice)
pagination += '<button type="button" name="'+totalpages+'" class="product_button" title="'+totalpages+'" >'+totalpages+'<\/button>';
}
pagination += '<button type="button" name="'+nextPage+'" class="product_button" title="Next►" >Next►<\/button>';
}
// update the html
$('.product_pagination').html(pagination);
}else{
// if no pages or just one page dont show pagination
$('.product_pagination').html('<button type="button" name="0" class="product_button_selected" title="1" >1<\/button>');
}
var offsetEnd = parseFloat(rowsPerPage) + parseFloat(offset);
/****** end build pagination links ******/
// build cells content
var cell = '<table border="0" cellpadding="2" cellspacing="0" width="100%" id="product_table">';
cell += '<tr>';
// get the keys is in the display pagination range
var pageProducts = filterdProducts.slice(offset,offsetEnd);
// loop over the query list
$.each(pageProducts, function(i, object) {
// get min and max price range for price range filter slider
setPriceRange(parseFloat(object.price));
countCellData++; // flug to know if there is content
cell += '<td align="center" >';
cell += '<div><img src="'+object.image+'" alt="'+object.title+'" title="'+object.title+'" longdesc="'+object.id+'" border="0" ><\/div>';
cell += '<div>'+object.title+'<\/div>';
cell += '<div>'+object.price+'<\/div>';
cell += '<div>'+object.category+'<\/div>';
cell += '<\/td>';
totalLoop--;
loop++;
// if the row ended but the table as unmach cells number
if(!totalLoop && loop){
for(var i=0;i<(maxColumn-loop);i++){
// add empty cell
cell += '<td> <\/td>';
}
}
// determine if the row ended
if(loop==maxColumn ){
cell += '<\/tr>';
loop = 0;
if(totalLoop){
cell += '<tr>';
}
}
});
cell += '<\/tr>';
cell += '<\/table>';
if(countCellData>0){
// if exist content
$('#product_show').html(cell);
// set image onclick event
$('#product_show img').click(function(){
alert('Product ID = '+$(this).attr('longdesc'));
});
}
setPagination();
}
</script>推荐答案
('#product_sort').val() ;
rowsPerPage = rowsPerPage?rowsPerPage:
('#product_sort').val() ; rowsPerPage = rowsPerPage?rowsPerPage:
('.product_pages button:first').html() ;
desc = sortOrder>0?true:false;
currentpage = currentpage>0?currentpage:1; // if current page is less than first page...
var totalLoop = rowsPerPage;
var loop = 0;
var countCellData = 0;
var offset = 0;
// empty content
('.product_pages button:first').html() ; desc = sortOrder>0?true:false; currentpage = currentpage>0?currentpage:1; // if current page is less than first page... var totalLoop = rowsPerPage; var loop = 0; var countCellData = 0; var offset = 0; // empty content
('#product_show').html(' ');
// set select boxes to there selected as the var value
('#product_show').html(' '); // set select boxes to there selected as the var value
这篇关于用于在jquery中搜索的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
