Fork me on GitHub

jQuery jPList plugin is deprecated. Please check pure JavaScript (ES6) jPList Library alternative instead.

Checkbox Path Filter Control Usage

Checkbox Path Filter Control

Add jPList scripts to the HEAD:

    
<!-- jPList Core -->		
<link href="jplist.core.min.css" rel="stylesheet" type="text/css" />
<script src="jplist.core.min.js"></script>	
<!-- Toogle Filters Bundle -->			
<link href="jplist.filter-toggle-bundle.min.css" rel="stylesheet" type="text/css" />
<script src="jplist.filter-toggle-bundle.min.js"></script>
<script>
$('document').ready(function(){
	$('#demo').jplist({				
		itemsBox: '.list' 
		,itemPath: '.list-item' 
		,panelPath: '.jplist-panel'	
	});
	
});
</script>
			
	

Add basic HTML structure to the BODY:

    
<!-- demo -->
<div id="demo">
	
	<!-- panel -->
	<div class="jplist-panel">						
		<!-- checkbox path filters -->
		<div 
		   class="jplist-group"
		   data-control-type="checkbox-group-filter"
		   data-control-action="filter"
		   data-control-name="themes">
		   
		   <input 
			  data-path=".architecture" 
			  id="architecture" 
			  type="checkbox" 									
		   /> 
		   
		   <label for="architecture">Architecture</label>
		   
		   <input 
			  data-path=".christmas" 										
			  id="christmas" 
			  type="checkbox" 
		   /> 
			  
		   <label for="christmas">Christmas</label>
		   
		   <input 
			  data-path=".nature" 
			  id="nature" 
			  type="checkbox"  
		   /> 
		   
		   <label for="nature">Nature</label>
		   
		   <input 
			  data-path=".lifestyle" 
			  id="lifestyle" 
			  type="checkbox" 
		   /> 
		   
		   <label for="lifestyle">Lifestyle</label>
		</div>
		<!-- checkbox filters -->
		<div 
		   class="jplist-group"
		   data-control-type="checkbox-group-filter"
		   data-control-action="filter"
		   data-control-name="colors">
		   
		   <input 
			  data-path=".red" 
			  id="red-color" 
			  type="checkbox" 									
		   /> 
		   
		   <label for="red-color">Red</label>
		   
		   <input 
			  data-path=".green" 										
			  id="green-color" 
			  type="checkbox" 
		   /> 
			  
		   <label for="green-color">Green</label>
		   
		   <input 
			  data-path=".blue" 
			  id="blue-color" 
			  type="checkbox"  
		   /> 
		   
		   <label for="blue-color">Blue</label>
		   
		   <input 
			  data-path=".brown" 
			  id="brown-color" 
			  type="checkbox" 
		   /> 
		   
		   <label for="brown-color">Brown</label>
		</div>		
		
	</div>				 
	
	<!-- HTML data -->   
	<div class="list">
		
		<!-- item 1 -->
		<div class="list-item">	
			...
		</div>
		
		<!-- item 2 -->
		<div class="list-item">	
			...
		</div>
		
		...
		
	</div>
	
	<!-- no results found -->
	<div class="jplist-no-results">
		<p>No results found</p>
	</div>
					
</div>