<html>
<head>
<title>jQuery Custom Dropdown with Checkbox</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<h1>jQuery Custom Dropdown with Checkbox</h1>
		
	<div id="checkbox-dropdown-container">
		<form id="fromCustomSelect" name="fromCustomSelect" action=""
			method="post">
			<div>
				<?php 
				    if(!empty($_POST["toys"])) { 
				    $selectedValues = implode(", ", $_POST["toys"]);
				?>
        			<div class="result-list">
            			<div class="result-list-heading">The selected options are: </div>
            			<div><?php echo $selectedValues; ?></div>
        			</div>
        			<?php 
				    } 
				?>
				<div class="custom-select" id="custom-select">Select Multi Options...</div>
				<div id="custom-select-option-box">
					<div class="custom-select-option">
						<input onchange="toggleFillColor(this);"
							class="custom-select-option-checkbox" type="checkbox"
							name="toys[]" value="Fidget Spinner"> Fidget Spinner
					</div>
					<div class="custom-select-option">
						<input onchange="toggleFillColor(this);"
							class="custom-select-option-checkbox" type="checkbox"
							name="toys[]" value="Lego Bricks"> Lego Bricks
					</div>
					<div class="custom-select-option">
						<input onchange="toggleFillColor(this);"
							class="custom-select-option-checkbox" type="checkbox"
							name="toys[]" value="YoYo"> YoYo
					</div>
					<div class="custom-select-option">
						<input onchange="toggleFillColor(this);"
							class="custom-select-option-checkbox" type="checkbox"
							name="toys[]" value="Barbie Doll"> Barbie Doll
					</div>
				</div>
			</div>
			<button type="submit" class="search btn">Submit</button>
		</form>
	</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",'#c6e7ed');
		} else {
			$(obj).parent().css("background",'#FFF');
		}
	}
	$(".custom-select-option").on("click", function() {
		var checkboxObj = $(this).children("input");
		$(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>