Click here to Skip to main content
15,885,546 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
in the following project I have checkbox then it becames true show you some products have os android.

thank you


JavaScript
        <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>
Posted
Comments
Thanks7872 18-Dec-14 4:33am    
On your first post, you told us to download source code and perform something in order to solve your issue. It didn't work the way you expected and you now reposted the same issue with a huge code block.

Even in this question,its not clear what your issue is. You have not mentioned the issue properly. Remove unnecessary code block,show the smallest code block with which you have issue. Use improve question link.
ravithejag 18-Dec-14 6:07am    
I hope it will answer your question

To check whether the checkbox is checked r not
if($("#checkBoxName").is(':checked'))
//display the details
else
//hide the details if already displayed on the screen
deepankarbhatnagar 18-Dec-14 7:53am    
Please explain your requirements

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900