Filter Checkbox

If more than 1 checbox selected then number will be displayed else selected label.

by Kushal Jayswal

HTML

<div class="col-md-4 hero">
	<a class="col-filter" href="javascript:void(0);">Filter <span></span></a>

	<ul class="col-filter-data relationFilter expanded" title="RELATION_FILTER:000000this entry">
	  <li>
		<label>
		  <input type="checkbox" class="relationTable-filter" value="RELATION_FILTER:000000this entry">
		  <span>THIS ENTRY (1)</span></label>
	  </li>
	  <li>
		<label>
		  <input type="checkbox" class="relationTable-filter" value="RELATION_FILTER:001010parent entry"><span>PARENT ENTRY (1)</span></label>
	  </li>
	  <li>
		<label>
		  <input type="checkbox" class="relationTable-filter" value="RELATION_FILTER:001020same composition as this entry"><span>SAME COMPOSITION AS THIS ENTRY (1)</span></label>
	  </li>
	  <li>
		<label>
		  <input type="checkbox" class="relationTable-filter" value="RELATION_FILTER:002100component of this entry"><span>COMPONENT OF THIS ENTRY (1)</span></label>
	  </li>
	</ul>
</div>
<div class="col-md-4 hero">
	<a class="col-filter" href="javascript:void(0);">Filter <span></span></a>

	<ul class="col-filter-data relationFilter expanded" title="RELATION_FILTER:000000this entry">
	  <li>
		<label>
		  <input type="checkbox" class="relationTable-filter" value="RELATION_FILTER:000000this entry">
		  <span>THIS ENTRY (1)</span></label>
	  </li>
	  <li>
		<label>
		  <input type="checkbox" class="relationTable-filter" value="RELATION_FILTER:001010parent entry"><span>PARENT ENTRY (1)</span></label>
	  </li>
	  <li>
		<label>
		  <input type="checkbox" class="relationTable-filter" value="RELATION_FILTER:001020same composition as this entry"><span>SAME COMPOSITION AS THIS ENTRY (1)</span></label>
	  </li>
	  <li>
		<label>
		  <input type="checkbox" class="relationTable-filter" value="RELATION_FILTER:002100component of this entry"><span>COMPONENT OF THIS ENTRY (1)</span></label>
	  </li>
	</ul>
</div>

CSS

a {
  text-decoration: none;
}

a span {
  text-decoration: none;
  color: #666;
  font-size: 10px;
}

JavaScript

(function($){
	var el 					= $('.col-md-4');
	//$appender = checkedEl.prev().find('span');
	
		el.find('.col-filter-data').on('click', function() {
			var v 				= $(this).find(':checked').next().text(),
				$appender 		= $(this).prev().find('span'),
				count_checked 	= $(this).find(':checked').length;
				console.log(v);	
			
			$appender.html("");
			
			if (count_checked == 1) {
				//console.log(count_checked);
				$appender.html("");
				$appender.append(v);
			} else if (count_checked > 1) {
				$appender.html("");
				$appender.append(count_checked);
			} else {
				$appender.html("");
			}
		});
})(jQuery);