<html>
<head>

<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

				<div class="custom-select" id="custom-select">Todos los niveles</div>
				<div id="custom-select-option-box">
					<div class="custom-select-option">
						<input onchange="toggleFillColor(this);"
							class="custom-select-option-checkbox" type="checkbox"
							name="Primara" value="Primaria" selected> Inicial
					</div>
					<div class="custom-select-option">
						<input onchange="toggleFillColor(this);"
							class="custom-select-option-checkbox" type="checkbox"
							name="Primaria" value="Primaria" selected> Preescolar
					</div>
					<div class="custom-select-option">
						<input onchange="toggleFillColor(this);"
							class="custom-select-option-checkbox" type="checkbox"
							name="Primaria" value="Primaria" selected> Primaria
					</div>
					<div class="custom-select-option">
						<input onchange="toggleFillColor(this);"
							class="custom-select-option-checkbox" type="checkbox"
							name="Primaria" value="Primaria" selected> Secundaria
					</div>					
					<div class="custom-select-option">
						<input onchange="toggleFillColor(this);"
							class="custom-select-option-checkbox" type="checkbox"
							name="Primaria" value="Primaria" selected> Media
					</div>					
					<div class="custom-select-option">
						<input onchange="toggleFillColor(this);"
							class="custom-select-option-checkbox" type="checkbox"
							name="Primaria" value="Primaria" selected> Superior
					</div>					
				</div>

	<script src="jquery-3.2.1.min.js"></script>
	<script>
	
	$("#custom-select").on("click",function(){
		$("#custom-select-option-box").toggle();
	});
	function toggleFillColor(obj) {
		$("#custom-select-option-box").show();
		if($(obj).prop('checked') == true) {
			$(obj).parent().css("background",'#ffb32e');
		} else {
			$(obj).parent().css("background",'#FFF');
		}
	}
	$(".custom-select-option").on("click", function() {
		var checkboxObj = $(this).children("input");
        if($(checkboxObj).prop('checked') == true)
		    $(checkboxObj).prop("checked",false);
	    else
		    $(checkboxObj).prop("checked",true);	    
		toggleFillColor(checkboxObj);
	});
		
	$("body").on("click",function(e){
		if(e.target.id != "custom-select" && $(e.target).attr("class") != "custom-select-option") {
			$("#custom-select-option-box").hide();
		}
	});
	</script>
</body>
</html>
