Fork me on GitHub

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

Checkbox Dropdown Control Usage

Checkbox Dropdown 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>	
<!-- checkbox dropdown control styles and js -->
<link href="jplist.checkbox-dropdown.min.css" rel="stylesheet" type="text/css" />
<script src="jplist.checkbox-dropdown.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 dropdown -->
			<div 
				class="jplist-checkbox-dropdown"
				data-control-type="checkbox-dropdown" 
				data-control-name="category-checkbox-dropdown" 
				data-control-action="filter"
				data-no-selected-text="Filter by category:"
				data-one-item-text="Filtered by {selected}"
				data-many-items-text="{num} selected">
				
				<ul>
					<li>
						<input data-path=".architecture" id="architecture" type="checkbox"/>
						<label for="architecture">Architecture</label>
					</li>
					
					<li>
						<input data-path=".christmas" id="christmas" type="checkbox"/>
						<label for="christmas">Christmas</label>
					</li>
					
					<li>
						<input data-path=".nature" id="nature" type="checkbox"/>
						<label for="nature">Nature</label>
					</li>
					
					<li>
						<input data-path=".lifestyle" id="lifestyle" type="checkbox"/>
						<label for="lifestyle">Lifestyle</label>
					</li>
				</ul>
			</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>